offsetWidth/getBoundingRect()/scrollWidth/client用法总结

文章目录

• offsetWidth
• getBoundingClientRect()
• clientWidth
• scrollWidth
• 测试举例
• 总结

offsetWidth

offsetWidth是一个只读属性，返回一个元素的布局宽度，为border-box的宽度。

语法：var offsetWidth =element.offsetWidth; 结果为四舍五入的整数。

getBoundingClientRect()

offsetWidth和其他方式返回的是四舍五入（round）的整数，想要得到小数则要用getBoundingClientRect()方法。

getBoundingClientRect()返回元素的大小及其相对于视口左上角的位置。

包括的属性有：width、height、left、right、top、bottom。

clientWidth

表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

scrollWidth

表示元素内容的宽度，包括由于滚动而未显示在屏幕中内容。

宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。

测试举例

结果：

总结

	包含边框(border-box)	不包含边框(padding-box)
返回整数	offsetWidth	clientWidth / scrollWidth
返回小数	getBoundingRect().width	\
包括滚动部分	\	scrollWidth