原生js獲取寬高與jquery獲取寬高的方法的關系

說明：1、因為獲取高度的情況跟獲取寬度的情況一樣，所以以下只說獲取寬度的情況。 
　　　2、以下所說的所有方法與屬性所返回的值都是不帶單位的。 
　　　3、為了方便說明，以下情況采用縮寫表示： 
　　　　obj -> 在原生JS中表示DOM對象；在JQuery中表示JQuery對象 
　　　　Width -> obj.style.width 
　　　　OffsetWidth -> obj.offsetWidth 
　　　　$width -> obj.width() 
　　　　$innerWidth -> obj.innerWidth() 
　　　　$outerWidth -> obj.outerWidth() 
　　　　padding -> 表示對象的padding-left和padding-right之和 
　　　　border -> 表示對象的border-left-width和border-right-width之和 

原生JS獲取寬度的相關屬性有 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; 
$outerWidth = border + padding +width; 

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