文章目录
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的值不同,获取的结果也不尽相同;而且不同浏览器下获取的值也不尽相同」
总结:
- 只有scrollTop/Left是“可读写的”,其余属性都是“只读”的
- clientWidth/Height、clientTop/Left、offsetWidth/Height、scrollWidth/Height 都是获取元素本身的样式(例如:宽高和边框等); 而offsetTop/Left/Parent获取的都是元素距离别人的距离;
- 操作浏览器的盒模型都是基于 document.documentElement(HTML元素)进行操作的;
- 获取到的样式值都是经过四舍五入的整数值,不会出现小数!!