詳解 $().css('width')和$().width()的區別


  在本次項目開發中,經常用jquery獲取高度和寬度並且動態加載,有時候用$().css('width')或$().width()這兩個方法獲取寬度並設置,但是有時候出現獲取不到的情況,查閱資料后發現他倆之間即相同又不同。
  概念:
   1.$().css()  
   在w3c jQuery的文檔中,$().css()方法設置或返回被選元素的一個或多個樣式屬性。
$().css()在設置多個屬性時,可以采用對象的形式,但值是字符串的形式(我都經常忽略而出問題)。

   2.$().width()
    
width()函數用於設置或返回當前匹配元素的寬度。返回第一個匹配元素的寬度。如果不為該方法設置參數,則返回以像素計的匹配元素的寬度。

  區別:

    1.$().css()返回的值帶單位,而$().width()不帶單位。

<body>
    <div style="width:200px;background:red;height:200px">獲取該標簽的寬度</div>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
        console.log($('div').css('width'));
        console.log($('div').width())
    })
    </script>
</body>

 結果如下: 注意顏色,通過typeof檢測,說明了前者是字符串,后者是數字

    2.$().css()在window,document這些元素對象中獲取不到該值,為undefined。而$().width()可以獲取該值。后者的適用范圍程度>前者。

<body>
    <div style="width:200px;background:red;height:200px">獲取該標簽的寬度</div>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
        console.log($('window').css('width'));
        console.log($(window).width())
    })
    </script>
</body>

 結果如下:  為什么$().css()中選擇器中是雙引號,而$().width()不是,這應該是語法問題,window是個變量,加上引號就代表是常量。



 另外:$().width(),在jquery版本為1.4.1后支持參數為函數的形式。

 

 

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM