原生js取得寬高與jquery獲取寬高的方法關係對比_javascript技巧

說明：1、因為取得高度的情況跟取得寬度的情況一樣，所以以下只說取得寬度的情況。
　　　2、以下所說的所有方法與屬性所傳回的值都是不帶單位的。
　　　3、為了方便說明，以下情況採用縮寫表示：

　　　　obj -> 在原生JS中表示DOM物件；在JQuery物件　多〦. 🎜>　　　　OffsetWidth -> obj.offsetWidth
　　　　$width -> obj.offsetWidth
　　　　$width -> obj.width()
　　〜　〜〜〕〜. $outerWidth -> obj.outerWidth()
　　　　padding ->表示物件的padding-left和padding-right總和
　　　　border -> 表示物件的border-left-width和border-right-width總和

原生JS取得寬度的相關屬性有width和

原生JS取得寬度的相關屬性有width和相關屬性有width和offsetWidth。 width的取得方法是obj.style.width，只有當物件是透過內嵌方式設定寬度時才能獲得，否則傳回的是一個空字串。 offsetWidth得到的值跟JQuery中獲得物件的outerWidth一樣，offsetWidth是非標準的但卻得到很好支援的屬性。

JQuery得到寬度的方法有width()、innerWidth()、outerWidth()這三種方法。具體使用方式是：obj.width()、obj.innerWidth()、obj.outerWidth()。 width()獲得的是物件的內容寬度，innerWidth()獲得的是物件的內容寬度與填充寬度的和，outerWidth()獲得的是包含邊框、填充寬度與內容寬度在內的寬度。

這五種方法之間的關係如下：

width = $width;
offsetWidth = border padding width;
$innerWidth = padding width; $innerWidth = padding width； = border padding width;

這五種方法對firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都相容，只是存在著兩種問題：1、width在沒有設定的情況下，chrome在第一次開啟頁面時，所取得到的寬度全部都是錯誤的。第二次開啟時，結果就跟firefox一致。 2、ie6未設定寬高的情況下，不會出現捲軸。