javascript基础学习系列-DOM盒子模型常用属性

Posted 2020-10-29 imsomnus

最近在学习DOM盒子模型，各种属性看着眼花缭乱，下面根据三个系列来分别介绍一下：

client系列

1. clientWidth ：width+(padding-left)+(padding-right)—>和内容溢出无关系
2. clientHeight：height+(padding-top)+(padding-bottom)—>和内容溢出无关系
3. clientLeft：左边框的宽度
4. clientTop：上边框的高度（border[Left/Top]Width）

offset系列

1. 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。

2. offsetWidth/offsetHeight：clientWidth/ clientHeight+左右/上下边框 —>和内容溢出无关系
3. offseTop/offsetLeft：当前元素的外边框距离父级参照物内边框的偏移量

scroll系列

1. scrollWidth/scrollHeight：和clientWidth／clientHeight一样（前提是：内容无溢出）

若容器内容有溢出：获取结果是如下规则：
scrollWidth：真实内容的宽度（包含溢出）+左填充
scrollHeight：真实内容的高度（包含溢出）+上填充。

2. scrollLeft／scrollTop（可读写 ）：滚动条卷曲的宽度和高度

scrollTop有两个临界值，最大值和最小值
滚动最小值：0，dom.scrollTop=一个小于0的数，滚动条也是滚动到顶部
滚动最大值：scrollHeight-clientHeight ,dom.scrollTop=一个大于（scrollHeight-clientHeight）的数，滚动条也是在最底部

通过以上我画了一张图，对照图看顿时你会觉得恍然大悟！请看下图：