在本次項目開發中,經常用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后支持參數為函數的形式。