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)獲取帶外邊距的寬度