scrollWidth,clientWidth,offsetWidth的区别
区别 clientWidth offsetWidth scrollWidth
2023-06-13 09:15:40 时间
通过一个demo测试这三个属性的差别。
说明:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
该demo就在页面中放一个textarea元素,采用默认宽高显示。
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
END
以上就是scrollWidth,clientWidth,offsetWidth区别的全部内容,希望对大家有所帮助。
相关文章
- stm32中UART和USART的区别「建议收藏」
- offsetWidth、clientWidth、width、scrollWidth区别及获取
- clientWidth、offsetWidth、区别「建议收藏」
- 自动 VoIP 与语音 VLAN有什么区别?
- 【Java】中的String、StringBuffer和StringBuilder的区别
- 惊呆面试官的回答:HashMap和TreeMap的区别
- 脑科学——揭露男女思考的区别
- IE和FIREFOX下CSS的区别与解决方法
- android中Invalidate和postInvalidate的更新view区别
- 深入SQLServer中定长char(n)与变长varchar(n)的区别详解
- Android中dip、dp、sp、pt和px的区别详解