javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下:
client系列
- clientWidth :width+(padding-left)+(padding-right)—>和内容溢出无关系
- clientHeight:height+(padding-top)+(padding-bottom)—>和内容溢出无关系
- clientLeft:左边框的宽度
- clientTop:上边框的高度(border[Left/Top]Width)
offset系列
- offsetParent:当前元素的父级参照(父级参照物),在同一个平面中,最外层的元素是里面所有元素的父级参照物(和html层级结构没有必然联系)
a)一般来说一个页面中所有元素的父级参照物都是body
b)body的父级参照物->document.body.offsetParent->null
c)可以通过position:absolute/realative/fixed改变父级参照物
我们可以总结一下规律:
position为fixed元素是没有offsetParent,但firefox统一返回body。
position为absolute, relative的元素的offsetParent总是为其最近的已定位
的元素,没有找最近的td,th元素,再没有找body。
position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
body为最顶层的offsetParent。
- offsetWidth/offsetHeight:clientWidth/ clientHeight+左右/上下边框 —>和内容溢出无关系
- offseTop/offsetLeft:当前元素的外边框距离父级参照物内边框的偏移量
scroll系列
- scrollWidth/scrollHeight:和clientWidth/clientHeight一样(前提是:内容无溢出)
若容器内容有溢出:获取结果是如下规则:
scrollWidth:真实内容的宽度(包含溢出)+左填充
scrollHeight:真实内容的高度(包含溢出)+上填充。
- scrollLeft/scrollTop(可读写 ):滚动条卷曲的宽度和高度
scrollTop有两个临界值,最大值和最小值
滚动最小值:0,dom.scrollTop=一个小于0的数,滚动条也是滚动到顶部
滚动最大值:scrollHeight-clientHeight ,dom.scrollTop=一个大于(scrollHeight-clientHeight)的数,滚动条也是在最底部
通过以上我画了一张图,对照图看顿时你会觉得恍然大悟!请看下图:
javascript基础学习系列-DOM盒子模型常用属性的更多相关文章
- DOM盒子模型常用属性client,offset和scroll
JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...
- javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
- JavaScript基础学习(九)—DOM
一.DOM概述 DOM(Document Object Model)文本对象模型. D: 文档,HTML文档或XML文档. O: 对象,document对象的属性和方法. ...
- javascript基础学习系列-1
JavaScript简介 JavaScript的用途 JavaScript用来制作web页面交互效果,提升用户体验. web前端三层来说:w3c的规范:行内样式(淘汰) 结构层 HTML 从语义的角度 ...
- CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
- javascript基础学习系列-原型链模式
1.demo代码如下: 2.画图如下: 3.规则: 1)每一个函数数据类型(普通函数/类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值 2)并且prototy ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
随机推荐
- redis StackExchange 主备 实现 demo
网上关于redis高可用基本都是用redis-sentinel 哨兵 或者 redis cluster 集群来实现, 但是有没有更简单的方式,比如我现在就只有2个redis实例.我试验的结果是我们可用 ...
- 谷歌、亚马逊相继宣布屏蔽 Flash 广告,又一个时代行将结束?【转载+整理】
原文地址 其实,如果你看一下乔布斯的传记,早在十几年以前,乔布斯就说过类似的话,他狠透了 Flash~ 据 InfoWorld 报道,谷歌已经正式宣布,在默认情况下,Chrome将不再自动播放Web页 ...
- 魅族便签,是否能成为国内便签应用的No.1?
继前不久锤子科技推出便签 Android 新版后,近期魅族在PRO 6公布会上也公布了最新的魅族便签应用.这一次魅族把便签应用拓展到了整个Android体系,也就是说.其它不论什么的Android手机 ...
- C++11 lambda表达式是如何实现的?
lambda表达式是如何实现的呢? 其实是编译器为我们了创建了一个类,这个类重载了(),让我们可以像调用函数一样使用.所以,你写的lambda表达式和真正的实现,是这个样子的: 而对于捕获变量的lam ...
- 大型互联网架构概述 关于架构的架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE
大型互联网架构概述 目录 架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE 本文旨在简单介绍大型互联网的架构和核心组件实现原理. 理论上讲,从安装配置 ...
- oracle本地编译问题
oracle10.2: --将过程重新编译为本地编译方式,提示有编译错误,经查提示未设置plsql_native_library_dir 参数 SQL> alter procedure p_xx ...
- iOS画折线图
代码例子效果: 下载地址:http://download.csdn.net/detail/qqmcy/6983187 LineChartViewDemo.h #import <UIKit/UI ...
- Linux给普通用户增加ssh权限
//1,创建用户 useradd name //2,修改密码 passwd name //3,修改ssh配置文件,在最后一行添加AllowUsers name vi /etc/ssh/sshd_con ...
- Mycat源码中的单例模式
在MyCat的源码中,很多对象都使用到了单例模式. 首先是MycatServer类,该实例必须全局唯一,所以这里涉及到JAVA的单实例模式,就是一个类只有唯一一个实例对象存在.先来看看mycat源码是 ...
- 【iCore1S 双核心板_ARM】例程一:ARM驱动三色LED
实验原理: 通过STM32的三个GPIO驱动一个三色LED,引脚PF3接蓝色LED(ARM_LEDB), 引脚PF4接绿色LED(ARM_LEDG),引脚PF5接红色LED(ARM_LEDR), G ...