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

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则仍能取到。

总结：

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

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

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

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