width 与 offsetWidth 的区别

1、宽度值大小：offsetWidth > width
element.offsetWidth = element.style.width + element.style.padding + element.style.border；（不包括margin）

2、offsetWidth 属性仅仅可读，而style.width 是可写的；
所以通常用 style.width用作进JavaScript中设置元素的宽度，而offsetWidth不可以。

3、offsetWidth 属性返回值是整数，如果实际值是小数，会根据实际值进行四舍五入操作，返回处理后的整数。width=44.499px；输出结果为49；
width=44.5px；输出结果为45；
而style.width的返回值是字符串，并且带有单位
width=44.499px；输出结果为44.499px；

4、style.width仅仅能返回以style方式定义的内部样式表的width属性值。
因此样式写在行内的时候

，用style.width或者offsetWidth都可以获取元素的宽度；
如果写在css样式表中的时候，.box{width:100px;}，此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。
————————————————
原文链接：https://blog.csdn.net/u012832088/article/details/79776959

width 与 offsetWidth 的区别相关推荐

比较 width 与 offsetwidth 的区别
比较width 与 offsetWidth 的区别 1.offsetWidth > width element.offsetWidth = element.style.width + eleme ...
html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如时,用 style.wid ...
js中 style.width与 offsetWidth的区别
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id=&q ...
style.width与offsetWidth的区别
1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带"px"单位,offsetWidth读取纯数值: 3. st ...
offsetX,offsetLeft,offsetWidth的区别详解
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示(鼠标位置)相对于最近父级元素的坐标(无论父级是否定位)(不管是谁 ...
[绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
clientWidth offsetWidth的区别
记录js中一些计算元素宽高相关的属性和方法,理解各属性之间的区别及应用场景. clientWidth/clientHeight 内容区域的宽度/高度,不包括边框border的宽度,含padding宽度 ...
clientWidth offsetWidth innerWidth 区别(窗口尺寸汇总）
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
clientWidth、offsetWidth、区别
clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度clientWidth = width+左右padding2,clie ...

width 与 offsetWidth 的区别

width 与 offsetWidth 的区别相关推荐

最新文章

热门文章