clientWidth offsetWidth scrollWidth区别

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

clientWidth offsetWidth scrollWidth区别相关推荐

图解clientWidth,offsetWidth,scrollWidth
关于clientWidth,offsetWidth,scrollWidth的文章很多,但我一直不太注意他们的区别,这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别 clientWid ...
[绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
scrollWidth,clientWidth,offsetWidth的区别
2019独角兽企业重金招聘Python工程师标准>>> 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过 ...
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...
clientWidth offsetWidth innerWidth 区别(窗口尺寸汇总）
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
clientWidth offsetWidth的区别
记录js中一些计算元素宽高相关的属性和方法,理解各属性之间的区别及应用场景. clientWidth/clientHeight 内容区域的宽度/高度,不包括边框border的宽度,含padding宽度 ...
offsetWidth、clientWidth、scrollWidth三者的区别
client可视区 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等. offse ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth
一.基本概念 1.document.documentElement.clientWidth:可视区屏幕宽度(你能看到的页面部分,不含滚动条) 2.document.documentElement.sc ...

clientWidth offsetWidth scrollWidth区别

clientWidth offsetWidth scrollWidth区别相关推荐

最新文章

热门文章