为了账号安全,请及时绑定邮箱和手机立即绑定

web前端scrollWidth,clientWidth,offsetWidth的区别

标签:
前端工具

通过一个demo测试这三个属性的差别。

说明:

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

该demo就在页面中放一个textarea元素,采用默认宽高显示。

 

https://img1.sycdn.imooc.com//5cc5613a0001531910500538.jpg


情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。


 

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

https://img1.sycdn.imooc.com//5cc56150000170ff12300722.jpg


 


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
6509
获赞与收藏
303

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消