offsetwidth:offset、client、scroll三大家对比?

 2021-06-25 17:06    77  

这三者都是获取大小和位置相关的属性,都有相应的left、top、width和heightoffsetwidth。

从位置上来对比offsetwidth:

offsetleft/offsetTop是相对于offsetParent的位置,offsetParent是具有定位属性的父级元素,如果父元素没有定位属性,继续向上查找,直到找到bodyoffsetwidth。

clientLeft/clientTop获取的是自身左边框和上边框的宽度。

scrollLeft/scrollTop是获取左侧和顶部滚动隐藏进去的距离。

从大小上来对比:

offsetWidth/offsetHeight是获取元素在页面中占据的实际大小 ,offsetWidth/offsetHeight = width/height + padding + border。

clientWidth/clientHeight是获取元素的宽高 + 内边距clientWidth/clientHeight = width/height + padding。scrollWidth/scrollHeight是获取元素的宽高 + 内边距 + 未显示的内容,不包含滚动条,scrollWidth/scrollHeight = width/height + padding + 未显示内容 - 滚动条宽度

本文标签:对比

原文链接:https://www.xgfox.com/alpx/18.html

本文版权:如无特别标注,本站文章均为原创。