说明：

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

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

情况1：

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

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

offsetWidth为元素的实际宽度。

情况2：

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

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

offsetWidth、offsetLeft、 clientWidth的区别

PS：offsetWidth和width的区别

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。

2.offsetWidth属性仅是可读属性，而style.width是可读写的。

3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位（px）。

4.style.width仅能返回以style方式定义的内部样式表的width属性值。

5.var positionParent = obj.offsetParent; //获取上一级定位元素对象

[绍棠] scrollWidth,clientWidth,offsetWidth的区别相关推荐

scrollWidth,clientWidth,offsetWidth的区别
2019独角兽企业重金招聘Python工程师标准>>> 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过 ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
clientWidth offsetWidth innerWidth 区别(窗口尺寸汇总）
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
scrollwidth ,clientwidth ,offsetwidth 三者的区别
clientwidth:内容可视区域的宽度 offsetwidth:元素整体宽度 scrollwidth:实际内容的宽度转载于:https://www.cnblogs.com/cuijin-book ...
clientWidth offsetWidth的区别
记录js中一些计算元素宽高相关的属性和方法,理解各属性之间的区别及应用场景. clientWidth/clientHeight 内容区域的宽度/高度,不包括边框border的宽度,含padding宽度 ...
完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth
from:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html HTML源码DOM的offsetLeft,Left,clientLef ...
完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth【转】
有时候项目中会用到用js获取元素位置来定位元素,我在网上开了大量的图解,代码,最终把我搞的晕了,还是结合网上的自己来总结一下,首先来看看网上的: DOM的定义如下图获取元素的位置属性可以通过 ...
16/8/23-jQuery完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片...
引用地址:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最 ...
scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离
轉自:http://www.cnblogs.com/mrhgw/archive/2006/11/08/553737.html 补充: scrollHeight: 获取对象的滚动高度. scrollLe ...

[绍棠] scrollWidth,clientWidth,offsetWidth的区别

offsetWidth、offsetLeft、 clientWidth的区别

[绍棠] scrollWidth,clientWidth,offsetWidth的区别相关推荐

最新文章

热门文章