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区别的全部内容，希望对大家有所帮助。
相关文章
这篇文章主要为大家详细介绍了利用H5api实现时钟的绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了在小程序中推送模板消息的实现方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
本篇文章主要给大家详细分析了js的作用域、预解析机制以及相关代码分析，对此感兴趣的朋友学习下吧。2018-02-02
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（二）
这篇文章主要介绍了Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜教程（二）的相关资料,需要的朋友可以参考下2015-12-12
javascript控制frame,iframe的src属性代码
原理就是通过获取当前网页地址栏的信息传参，然后设置框架的地址。2009-12-12
这篇文章主要为大家详细介绍了js实现列表自动滚动循环播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了关于JavaScript中name的意义冲突,需要的朋友可以参考下2014-05-05
为什么要做圆角的div： 圆角div平滑美观，某些情况下有比较不错的效果。比如说要做一个报message的消息框，那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。2009-10-10
获取HTMl文件制定的元素的实现代码，需要的朋友可以参考下。2010-04-04
用js脚本控制asp.net下treeview的NodeCheck的实现代码
根据TreeView2.js修改后的TreeView父节点与子节点的CheckBox联动.2010-03-03
最新评论