offsetWidth,clientWidth,width,scrollWidth之间的区别

2019独角兽企业重金招聘Python工程师标准>>>

var divObj=document.getElementById("div");

1.offsetWidth

var divOffsetWidth=divObj.offsetWidth; //包含：元素宽度+内边距+边框

var divOffsetWidth=$(divObj).outerWidth(false);//false：(包含：元素宽度+内边距+边框)，true：(包含：元素宽度+内边距+边框+外边距)

附：高度取值同上

2.clientWidth

var divClientWidth=divObj.clientWidth;//元素宽度+内边距

var divClientWidth=$(divObj).innerWidth();//元素宽度+内边距

附：高度取值同上

3.width

var divWidth=divObj.style.width;//元素宽度

var divWidth=$(divObj).width();//元素宽度

附：高度取值同上

4.scrollWidth

var divScrollWidth=divObj.scrollWidth;//元素宽度+内边距+溢出尺寸(如果有的话)

jquery无此相同的调用

附：高度取值同上

注意：

• offsetWidth(offsetHeight)与style.width(style.height)的区别

offsetWidth返回值不带单位，style.width返回值带单位，如果需要对取得的值进行计算，用offsetWidth比较方便，如果拿到offsetWidth设置style.width的值需要加上单位“px”。

• style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
• style.height的值需要事先定义，否则取到的值为空。而且必须要定义在html里，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

总结：

1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高

2、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度

3、若要获取元素包含边框的宽度，则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的Width(false)/$(divObj).outerHeight(false)获取

4、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度

 

 

转载于:https://my.oschina.net/u/3680343/blog/1941547