offsetWidth与clientWidth的区别

原创已于 2023-02-21 11:16:34 修改 · 3.2k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-02-20 17:35:09 首次发布

js重难点专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中用于获取元素位置和尺寸的三个关键属性：offset,client和scroll。offset提供元素相对于父元素的偏移量和自身宽高；client则关注元素的可视区域，不包括边框和滚动条；scroll属性涉及元素的滚动信息，包括内容、padding和隐藏区域的宽高。同时，文章指出了判断滚动条是否到底的常见问题及其解决方案。

1.offset（元素偏移量）

2.client（元素可视区）

3.scroll （元素滚动）

1.offset（元素偏移量）

offsetTop与offsetLeft是元素本身相对于父元素的偏移量，如果没有父元素，则以body为父元素进行偏移
offsetWidth与offsetHeight是元素自身的宽高，包括border和padding，是只读属性，不能修改
style属性也能获取元素的宽高，但是style只能获取行内样式，而offsetWidth与offsetHeight没有限制，style获取到的是带单位的字符串，而它俩是数字类型，还有就是style获取到的是不包含border和padding的宽高。如果只是获取元素宽高，就用offsetWidth与offsetHeight，因为它俩是只读的，要修改就用style。

2.client（元素可视区）

clientTop与clientLeft是元素的上边框和左边框大小
clientWidth和clientHeight是元素可见区域的padding和content，不包括border，滚动条，overflow折叠起来的部分

3.scroll （元素滚动）

scrollWidth和scrollHeight：不包括border和滚动条的宽高，包括content，padding，和overflow隐藏的的区域
scrollWidth：content的宽 + padding的宽（把滚动条的宽度要从容器宽减去，隐藏部分的宽度也算在里面）
scrollHeight：content的宽 + padding的宽（把滚动条的高度度要从容器高减去，隐藏部分的高度也算在里面）
scrollTop：滚动条滚动后，可见区域最顶端到容器最顶端的距离（包括padding，不包括border）
scrollLeft：滚动条滚动后，可见区域最左端到容器最左端的距离

4.判断滚动条滚动到底了的bug

在了解了前面的知识后，可以发现当scrollTop + clientHeight == scrollHeight时，恰好是滚动条滚动到底部了。但是实际情况下，只有1920x1080分辨率的情况下才可以，当改变浏览器的缩放比例时（或者电脑屏幕本身就不是1920x1080分辨率），scrollTop会是小数（且比标准下小一点），所以就会造成它们不相等，从而判断不出滚动条是否到底了。