scrollWidth,clientWidth,offsetWidth的区别
2016-12-10 23:25
411 查看
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
![](https://images2015.cnblogs.com/blog/341068/201612/341068-20161210232252241-928842722.png)
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
![](https://images2015.cnblogs.com/blog/341068/201612/341068-20161210232310288-1601153434.png)
[b]技术交流QQ群:15129679[/b]
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
![](https://images2015.cnblogs.com/blog/341068/201612/341068-20161210232252241-928842722.png)
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
![](https://images2015.cnblogs.com/blog/341068/201612/341068-20161210232310288-1601153434.png)
[b]技术交流QQ群:15129679[/b]
相关文章推荐
- Javascript:scrollWidth,clientWidth,offsetWidth的区别
- clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别
- clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别
- 图示offsetWidth clientWidth scrollWidth scrollTop scrollLeft等属性的细微区别
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- JS属性 ClientTop,scrollTop,offsetWidth,ClientWidth,clientLeft,padding,border,top,margin区别
- Javascript:scrollWidth,clientWidth,offsetWidth的区别
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
- JS中关于clientWidth offsetWidth scrollWidth 等的区别
- Javascript:scrollWidth,clientWidth,offsetWidth的区别
- Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)
- 【JavaScript】offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- Javascritp client,offset,scroll的区别,这里只说width和height
- offsetWidth clientWidth scrollWidth scrollTop scrollLeft等属性的细微区别
- Javascript:scrollWidth,clientWidth,offsetWidth的区别
- clientWidth offsetWidth scrollWidth的区别
- offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
- Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)
- 转:scrollWidth,clientWidth,offsetWidth的区别