scrollWidth,clientWidth,offsetWidth的区别
作者:hebedich 时间:2024-04-22 22:29:00
通过一个demo测试这三个属性的差别。
说明:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素,采用默认宽高显示。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
END
标签:scrollWidth,clientWidth,offsetWidth
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
scrapy-redis源码分析之发送POST请求详解
2021-05-19 05:24:03
[Oracle] CPU/PSU补丁安装详细教程
2024-01-27 22:17:52
![](https://img.aspxhome.com/file/2023/0/64850_0s.jpg)
js实时获得服务器上时间
2008-11-25 13:55:00
sql 查询记录数结果集某个区间内记录
2023-07-09 08:25:01
Yii2创建多界面主题(Theme)的方法
2024-04-28 09:44:40
一行代码让 Python 的运行速度提高100倍
2021-05-18 12:29:50
如何使用微信公众平台开发模式实现多客服
2023-11-14 17:48:37
如何随机显示图片计数器?
2010-05-16 15:21:00
基于Python的图像数据增强Data Augmentation解析
2022-12-21 11:50:31
![](https://img.aspxhome.com/file/2023/1/87891_0s.jpg)
Python基于TCP实现会聊天的小机器人功能示例
2022-11-08 13:03:33
![](https://img.aspxhome.com/file/2023/8/82748_0s.png)
SQL建立数据库及删除数据库命令
2011-12-01 10:23:21
PDO::getAttribute讲解
2023-06-06 02:58:22
Google谷歌农历鼠年春节的变化
2008-02-11 17:07:00
![](https://img.aspxhome.com/file/UploadPic/20082/11/200821117922974s.png)
用python爬取历史天气数据的方法示例
2022-10-30 21:28:42
![](https://img.aspxhome.com/file/2023/3/68863_0s.png)
range 标准化之获取
2023-09-01 05:35:11
![](https://img.aspxhome.com/file/2023/5/56145_0s.png)
python并发编程之多进程、多线程、异步和协程详解
2021-12-10 00:20:35
Python 基于win32com客户端实现Excel操作的详细过程
2021-01-18 11:22:47
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2023-07-21 14:48:58
python使用urllib2提交http post请求的方法
2023-11-24 19:35:53
详解PyCharm+QTDesigner+PyUIC使用教程
2022-09-24 07:56:20
![](https://img.aspxhome.com/file/2023/5/64705_0s.png)