三大系列 | 作用 |
element.offsetWidth | 返回包括padding、边框、内容区的宽度,返回数值不带单位 |
element.clientWidth | 返回包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度。不含边框,返回数值不带单位 |
其示意图可见下图:
主要的用法区别:
- offset 系列 常用于获取元素位置(自身的宽度高度),获得元素距离带有定位父元素的位置 比如:offsetLeft 和 offsetTop
- client 翻译为客户端,可动态获取元素的大小 比如:clientWidth 和 clientHeight
client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元素左边框的大小 element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 element.clientHeight 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 - scroll 经常用于获取滚动距离 比如:scrollTop 和 scrollLeft
scroll系列属性 作用 element.scrollTop 返回被卷去的上侧距离,返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位 element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位 element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位
注意:页面滚动的距离要通过 window.pageXOffset 获取。