哪些是offset和client属性？

离了大谱。 在HTML5中，我们时常需要获取元素的尺寸和位置。这时候就会用到offset和client这两个属性。虽然它们都能获取元素的较大较小，但它们的计算方式彻底不一样哦！

offsetWidth和offsetHeight

offsetWidth和offsetHeight这两个属性能够获取一个元素的外部尺寸 也就是：，这也行？

offsetWidth = width + 太坑了。 左右padding + 左右border

offsetHeight = height + 上下padding + 上下border，哈基米！

举个例子：

醉了... 上面当前这个div的offsetWidth就是： 100 + 2×10 + 2×2= 124px

clientWidth和clientHeight

而clientWidth和clientHeight则是获取元素的内部尺寸也就是：

clientWidth = width + 左右padding

本质上... clientHeight = height + 上下padding

用同样的例子：

试着... 当前这个div的clientWidth就是： 100 + 2×10= 120px

注意哦！这里不包括边框！

最主要差别

当前我们来一下它们之间的最主要差别：

简洁来说： - offset* 包括边框 - client* 不包括边框

其他相关属性

除了这四个属性之外还有其他一些相关属性也值得了解：

scrollWidth和scrollHeight

这两个属性能够获取一个元素在内容溢出时实际需要体现的完整较宽度或较高度。如果内容没有溢出，它就等于客户端区域较大较小，起初我以为...。

getBoundingClientRect

这是一个更强较大较大的方法， 能够返回一个DOMRect对象， 摸鱼。 包含元素在视口中的精准位置信息。

javascript var rect = element.getBoundingClientRect; console.log; // 元素较宽度 c 我们都经历过... onsole.log; // 元素较高度 console.log; // 元素顶部到视口顶部距离 console.log; // 元素左侧到视口左侧距离

栓Q！ 当前这个方法特别适合需要精准计算位置的时候采用。

offsetTop/Left 和 clientTop/Left

• offsetTop/Left: 获取当前元素相对于其定位父级的偏移量。
• clientTop/Left: 获取当前元素上边框或左边框的较宽度。

常见问题

Q：怎样正确选择采用哪个属性？

ICU你。 A：看你需要哪些数据啊！ - 需要包含边框？用offset* - 不需要包含边框？用client* - 需要精准位置信息？用getBoundingClientRect

Q：这一些属性能否获取隐藏元素的尺寸？

A：不行哦！如果一个元素设置了display:none或者visibility:hidden， 说到点子上了。 这一些属性都会返回0。想要获取隐藏元素的尺寸，能够先临时体现它出来再计算。

Q：为哪些我的计算最终还是结果是与预期不符？

A：有可能有几种原因： - 遗忘了滚动条占用空间范围 - 遗忘了box-sizing设置为border-box会改变默认行为 - 没考虑到子元素对父级布局作用于

通过本文我们学习了解到了： - offset系列包括边框 - client系列不包括边框 - getBoundingClientRect更全面更精准

记住这一些差别后你就能准确地根据需求选择合适方法 太魔幻了。 来获取HTML5中任意DOM节点完整布局信息啦！