clientWidth offsetWidth scrollWidth区别

Posted 2022-11-30 yang_chuanlong

clientWidth: 元素内部宽度，即可视内容区域宽度， 它包括左侧padding宽度加上可视内容宽度再加上右侧padding宽度。也即元素左边界内侧到右边界内侧的距离（再减去滚动条的宽度如果有滚动条的话）。

offsetWidth:元素外部宽度，即整个元素的宽度，包括左右边界宽度加上左右padding宽度再加上可视内容区域宽度

scrollWidth: 元素内部整个内容区域的宽度。在元素没有滚动条的情况, scrollWidth = clientWidth, 在元素有滚动条的情况下scrollWidth > clientWidth。

（1）元素没有滚动条

如下图为一个宽300px, padding-left为35px, padding-right为10px, border为15px的div

clientWidth = paddingLeftWidth + contentWidth + paddingRightWidth = 35px + 300px + 10px = 345px

offsetWidth = borderLeftWidth + paddingLeftWidth + contentWidth + paddingRightWidth + borderRightWidth = 15px + 35px + 300px + 10px + 15px = 375px

因为没有滚动条 scrollWidth = clientWidth = 345px

See this example in jsfiddle

（2）元素出现滚动条

此时

clientWidth = paddingLeftWidth + contentWidth + paddingRightWidth= 35px + 283px + 10px  = 328px

offsetSet = borderRightWidth + paddingLeft + contentWidth + paddingRight + scrollBarWidth + borderRightWidth =  375px;

scrollWidth =  paddingRightWidth + innerDivWidth + paddingRightWidth = 35px + 600px + (10px) = 635px

注意上式的计算结果应该为645px, 但如果一个display属性为block且具有设定宽度的div内嵌到宽度较窄的div中，滚动条出现，这时外面的div的padding-right就会被忽略。所以paddingRightWidth 10px, 就没被回到scrollWidth中去。

see the second example in jsfiddle

总结， offsetWidth >= clientWidth

scrollWidth >= clientWidth

滚动条的宽度 scrollWidth  = offsetWidth - borderRightWidth - borderLeftWidth - clientWidth;

现代浏览器中滚动的宽度一般为17px