scrollWidth,clientWidth,offsetWidth的区别
更新时间：2015年01月13日 14:36:15 投稿：hebedich
这篇文章主要介绍了scrollWidth,clientWidth,offsetWidth的区别,需要的朋友可以参考下
通过一个demo测试这三个属性的差别。
说明：
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素，采用默认宽高显示。
情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2：
元素的内容超过可视区，滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
END
以上就是scrollWidth,clientWidth,offsetWidth区别的全部内容，希望对大家有所帮助。
您可能感兴趣的文章:
- javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
- javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
- scrollWidth,clientWidth与offsetWidth的区别
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- this.clientWidth和this.offsetWidth两个有什么不同
- 与ClientWidth有关的一点资料
- JavaScript中clientWidth,offsetWidth,scrollWidth的区别
相关文章
这篇文章主要介绍了JavaScript计算某一天是星期几的方法,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript闭包，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04![解决FireFox下[使用event很麻烦]的问题](//img.jbzj.com/images/xgimg/bcimg2.png)
解决FireFox下[使用event很麻烦]的问题...2006-11-11
这篇文章主要给大家介绍了关于JavaScript循环链表实现的相关资料,循环链表和单向链表很相似,唯一的区别是循环链表的尾节点是指向头节点的,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Bootstrap模态框禁用空白处点击关闭的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家介绍了JavaScript跳出iframe框架示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-11-11
JS中的for in 可遍历变量的所有属性！利用此特性制作了一个JS当前属性查询！2010-12-12
本篇文章主要介绍了p5.js入门教程之平滑过渡(Easing)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇 layui扩展上传组件模拟进度条的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript中一些特殊的字符运算的相关资料,需要的朋友可以参考下2017-08-08
![解决FireFox下[使用event很麻烦]的问题](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论