以前一直用jquery的.width()方法來獲取一個元素的當前的寬度。不管該元素是否設定了寬度，CSS樣式是內聯、外聯or內嵌，都可用此方式獲得元素當前的寬度。

今天想用原生JS想獲取一個元素寬度時，寫document.getElementById(“id”).style.width或者document.getElementById(“id”).width都取不到值。。。

總結了一下。在以下情況下，js原生.style.width或者.width取不到值
1.元素未設定寬度值。
2.元素設定了寬度值，但，設定在內聯或外聯樣式表中，而非內嵌式的。比如

css程式碼

p{
    background:pink;
}
 

html程式碼

<p id="p1">aaaaaaaaaa</p>

PS：雖然這種方式取不到寬度值。但卻可以設定元素的寬度值。比如：設定p元素寬度為200px:

document.getElementById("p1").style.width ="200px";

綜上，所以，只有將元素的樣式設定成內嵌式的，才可以通過 document.getElementById(“id”).style.width 來獲取寬度值；
比如：

dddddddddd

執行js程式碼

var w = document.getElementById(“p1”).style.width;
alert(w);
執行後輸出結果為144px

那麼，對於沒有設定寬度的元素、亦或CSS樣式非內嵌式的，js原生寫法可以通過offsetWidht來獲取寬度
即：document.getElementById(“#p1”).offsetWidth;

ps:對於設定了CSS樣式的元素（內聯、內嵌、外聯）offsetWidth 也都可以獲得值

所以，jquery的width()與js的offsetWidth都可以獲取元素的寬度，但有個區別：
.width()的值單純是內容區域的寬度、不包括內外補丁和border。ie6+和chrome相同。
offsetWidth ：包括了內補丁和border，不包括外補丁。ie6+和chrome相同