JS盒子模型

---

JS盒子模型

一、offset类

1、offsetTop

offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

2、offsetLeft

offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

3、offsetWidth

clientWidth基础上“加上”左右边框

4、offsetHeight

clientHeight基础上“加上”上下边框

5、offsetParent

获取元素的父级参照物「同一个平面(文档流)中，最外层元素是内层所有元素的父级参照物」

• 默认情况下，元素的父级参照物都是body「body.offsetParent===null」
• 想要修改父级参照物，可以修改元素的“定位规则”「目的：让其脱离文档流」

二、client类

1、clientTop

获取元素上边框高度

2、clientLeft

获取元素左边框的宽度

3、clientWidth

获取元素可视区域的宽「真实内容+padding」，不受内容溢出的影响

4、clientHeight

获取元素可视区域的高「真实内容+padding」，不受内容溢出的影响

三、scroll类

1、scrollTop

获取盒子(或者页面)卷去的高度「这两个属性是13个属性中唯一“可读写”的，其余的11个属性都是“只读”的」

2、scrollLeft

获取盒子(或者页面)卷去的宽度「这两个属性是13个属性中唯一“可读写”的，其余的11个属性都是“只读”的」

3、scrollWidth

在没有内容溢出的情况下，获取的值和clientWidth相同

有内容溢出的情况：获取的是真实宽(包含溢出的内容)，获取是约等于的值「因为根据设置overflow的值不同，获取的结果也不尽相同；而且不同浏览器下获取的值也不尽相同」

4、scrollHeight

在没有内容溢出的情况下，获取的值和clientHeight相同

有内容溢出的情况：获取的是真实高(包含溢出的内容)，获取是约等于的值「因为根据设置overflow的值不同，获取的结果也不尽相同；而且不同浏览器下获取的值也不尽相同」

总结：

1. 只有scrollTop/Left是“可读写的”，其余属性都是“只读”的
2. clientWidth/Height、clientTop/Left、offsetWidth/Height、scrollWidth/Height 都是获取元素本身的样式（例如：宽高和边框等）; 而offsetTop/Left/Parent获取的都是元素距离别人的距离；
3. 操作浏览器的盒模型都是基于 document.documentElement（HTML元素）进行操作的；
4. 获取到的样式值都是经过四舍五入的整数值，不会出现小数！！