scrollWidth、clientWidth与offsetWidth的区别
2016-04-19 21:53
288 查看
一、各自的定义:
scrollHeight, scrollWidth:返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 与 offsetWidth 不同,offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。
offsetWidth,offsetHeight:返回元素的高度和宽度,以像素为单位。对IE6.0、FF1.06+:offsetWidth = width + padding + border,offsetHeight = height + padding + border;IE5.0/5.5:
offsetWidth = width,offsetHeight = height。
clientWidth ,clientHeight :clientWidth = width +padding,clientHeight = height + padding。
二、图示:(图是找的别人的)
情况1:元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。scrollWidth=clientWidth,两者皆为内容可视区的宽度。offsetWidth为元素的实际宽度。
情况2:元素的内容超过可视区,滚动条出现和可用的情况下。scrollWidth>clientWidth。scrollWidth为实际内容的宽度。clientWidth是内容可视区的宽度。offsetWidth是元素的实际宽度。
scrollHeight, scrollWidth:返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 与 offsetWidth 不同,offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。
offsetWidth,offsetHeight:返回元素的高度和宽度,以像素为单位。对IE6.0、FF1.06+:offsetWidth = width + padding + border,offsetHeight = height + padding + border;IE5.0/5.5:
offsetWidth = width,offsetHeight = height。
clientWidth ,clientHeight :clientWidth = width +padding,clientHeight = height + padding。
二、图示:(图是找的别人的)
情况1:元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。scrollWidth=clientWidth,两者皆为内容可视区的宽度。offsetWidth为元素的实际宽度。
情况2:元素的内容超过可视区,滚动条出现和可用的情况下。scrollWidth>clientWidth。scrollWidth为实际内容的宽度。clientWidth是内容可视区的宽度。offsetWidth是元素的实际宽度。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)