快捷導(dǎo)航

淺析jQuery1.8的幾個(gè)小變化

更新時(shí)間：2013年12月10日 09:05:26 作者：

這篇文章主要介紹了jQuery1.8中的幾個(gè)小變化。需要的朋友可以過來參考下，希望對大家有所幫助

一，.width() 和 .height()方法

1.8增加了對css屬性box-sizing的支持，需要注意與1.7.2的區(qū)別了。1.7.2及以前的版本無論是否定義box-sizing: border-box返回的都是盒模型中元素內(nèi)容的寬度或高度，不包括padding和border。

1.8后則不同了，當(dāng)設(shè)置了css屬性box-sizing: box-border后，使用width()返回的數(shù)值有可能與css中設(shè)置的不同。如

復(fù)制代碼代碼如下:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"/> 
        <style type="text/css">
            #container { 
                box-sizing: border-box; 
                -moz-box-sizing: border-box; 
                width: 500px; 
                padding: 5px; 
                border: 5px solid gold; 
            } 
        </style> 
        <script src="js/jquery-1.8.0.js"></script> 
    </head> 
    <body> 
        <div id="container"></div> 
        <script> 
            var $el = $('#container') 
            var w = $el.width(); 
            console.log(w) 
        </script> 
    </body>    
</html>

div[id=container]的box-sizing設(shè)置為border-box（Firefox14.1尚不支持border-box，使用-moz-border-box）。

除了設(shè)置width:500px外，還設(shè)置了padding和border分別為5px。各瀏覽器打印結(jié)果如下

IE6/7 : 500

IE8/9/10: 480

Safari5/6: 480

Chrome21/Firefox14: 480

IE6/7不支持box-sizing，輸出的依然是500。但支持該熟悉的瀏覽器此時(shí)輸出的結(jié)果則是480（刨去了盒模型的border和padding）。因此在1.8中需要注意使用box-sizing屬性帶來的width和height的結(jié)果變化。

二，.outerWidth 和 .outerHeight()方法

1.7.2及之前版本，outerWidth/outerHeight只作為getter。不傳true時(shí)返回元素的寬度或高度（含padding和border），傳true時(shí)（當(dāng)然也可以傳數(shù)字1）返回值加上margin。

1.8及后具有了setter功能，如果獲取時(shí)想計(jì)算margin只能傳true，不能傳數(shù)字1等，因?yàn)閭鲾?shù)字1等在jQuery內(nèi)部將處理為設(shè)置元素寬高。且返回的不是數(shù)字而是jQuery對象（和jQuery其它setter一樣）。