快捷導(dǎo)航

原生js獲取寬高與jquery獲取寬高的方法關(guān)系對(duì)比

更新時(shí)間：2014年04月04日 11:41:45 作者：

這篇文章主要介紹了原生js獲取寬高與jquery獲取寬高的方法關(guān)系對(duì)比,需要的朋友可以參考下

說(shuō)明：1、因?yàn)楂@取高度的情況跟獲取寬度的情況一樣，所以以下只說(shuō)獲取寬度的情況。
　　　2、以下所說(shuō)的所有方法與屬性所返回的值都是不帶單位的。
　　　3、為了方便說(shuō)明，以下情況采用縮寫(xiě)表示：

　　　　obj -> 在原生JS中表示DOM對(duì)象；在JQuery中表示JQuery對(duì)象
　　　　Width -> obj.style.width
　　　　OffsetWidth -> obj.offsetWidth
　　　　$width -> obj.width()
　　　　$innerWidth -> obj.innerWidth()
　　　　$outerWidth -> obj.outerWidth()
　　　　padding -> 表示對(duì)象的padding-left和padding-right之和
　　　　border -> 表示對(duì)象的border-left-width和border-right-width之和

原生JS獲取寬度的相關(guān)屬性有 width和offsetWidth。width的獲取方法是obj.style.width，只有當(dāng)對(duì)象是通過(guò)內(nèi)嵌方式設(shè)定寬度時(shí)才能獲得，否則返回的是一個(gè)空字符串。offsetWidth獲得的值跟JQuery中獲得對(duì)象的outerWidth一樣，offsetWidth是非標(biāo)準(zhǔn)的但卻得到很好支持的屬性。

JQuery獲得寬度的方法有width()、innerWidth()、outerWidth()這三種方法。具體使用方式是：obj.width()、obj.innerWidth()、obj.outerWidth()。width()獲得的是對(duì)象的內(nèi)容寬度，innerWidth()獲得的是對(duì)象的內(nèi)容寬度與填充寬度的和，outerWidth()獲得的是包括邊框、填充寬度與內(nèi)容寬度在內(nèi)的寬度。

這五種方法之間的關(guān)系如下：

width = $width;
offsetWidth = border + padding +width;
$innerWidth = padding + width;
$outerWidth = border + padding +width;

這五種方法對(duì)firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都兼容，只是存在著兩種問(wèn)題：1、width在沒(méi)有設(shè)定的情況下，chrome在第一次打開(kāi)頁(yè)面時(shí)，所獲取到的寬度全部都是錯(cuò)誤的。第二次打開(kāi)時(shí)，結(jié)果就跟firefox一致。2、ie6未設(shè)定寬高的情況下，不會(huì)出現(xiàn)滾動(dòng)條。

您可能感興趣的文章: