scrollWidth,clientWidth,offsetWidth的区别,类似这样的再记录
2016-08-08 14:38
405 查看
原文地址:http://www.cnblogs.com/kongxianghai/p/4192032.html
通过一个demo测试这三个属性的差别。
说明:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素,采用默认宽高显示。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
通过一个demo测试这三个属性的差别。
说明:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素,采用默认宽高显示。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
相关文章推荐
- Java Web的Excel导出处理(基于POI)
- traceroute工作原理
- Android N Notification Direct Reply
- 通过Spring Mail Api发送邮件
- redis学习笔记(2)主从复制
- android 6.0 fota升级更新modem的方法
- 那么小,那么慢,那么美
- cpp11新特性详解与应用
- okhttp
- Ehcache3.0.0的使用
- 通讯录(文件版)三
- 关于对Android的videoView和mediaController的吐槽
- CPU 信息
- qt数据库及密钥操作
- pkg-config
- APP性能测试之卡顿比(FPS)
- android textview自动换行、排列错乱问题及解决
- Android Bundle类
- JAVA实现截屏
- WCF学习之旅—HTTP双工模式(二十)