1. 程式人生 > >js style.width獲取不到元素的寬度

js style.width獲取不到元素的寬度

jquery用習慣了,用width()就能獲取元素的寬度,但有些時候用js獲取元素寬度獲取不到,document.getElementById("id").style.width,原因:

1.元素未設定寬度值

2.元素設定了寬度值,但,設定在內聯或外聯樣式表中,而非內嵌式的。

雖然這種方式獲取不到元素寬度,但是可以設定寬度 document.getElementById("id").style.width = "100px";

只有將元素的寬度設定成內嵌式,才能通過document.getElementById("id").style.width獲取寬度

<p id="p1" style="width:100px;"></p>

對於沒有設定寬度的元素、亦或CSS樣式非內嵌式的,js原生寫法可以通過offsetWidht來獲取寬度。

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