jQuery .width（），style.width和jQuery .css（'width'）之間有什么區別？

Question

jQuery的.width() ，jQuery的.css('width')和節點上的.style.width屬性返回的值有什么區別？

我很好奇，因為在嘗試將兩個表格單元格的寬度設置為相等時，前兩個給了我相同的錯誤答案。 它們實際測量的是什么，為什么它與我在瀏覽器中查看元素時在.style屬性中看到的值不同？

Answer 1

從width官方文檔

.css（width）和.width（）之間的區別在於后者返回無單位像素值（例如，400），而前者返回單位完整的值（例如，400px）。 當需要在數學計算中使用元素的寬度時，建議使用.width（）方法。

我會說 .css('width')和 .style.with之間沒有區別，因為 css()方法用於設置樣式對象屬性。

.css('width') /。 .width()和.style.with之間的區別在於jQuery方法使用window.getComputedStyle( elem, null )獲取計算樣式。 應用CSS和樣式后，此方法用於讀取實際屬性。

Answer 2

補充克勞迪奧·雷迪的回答：看看現場的差異： http ： //jsfiddle.net/vovkss/kPXaB/

我用cm單位有意證明的輸出.css('width') 可以被轉換為像素 （或其他單位），而.width()是始終代表像素的數目的整數值。

請注意， .style.width僅適用於內聯樣式 。

• HTML：

   <div id="mydivInlineStyle" style="width: 10cm"><b>Inline style:</b> </div> <div id="mydivExternalStylesheet"><b>External stylesheet:</b> </div> 

• CSS：

   div { width: 10cm; border: 10px solid blue; padding: 11px; margin: 12px; background: aqua; white-space: pre; } 

• JS：

   $('div').each(function(){ $(this).append( 'jQuery width(): ' + $(this).width() + "\\n" + '.css(\\'width\\'): ' + $(this).css('width') + "\\n" + '.style.width: ' + this.style.width ); }); 

• 輸出：

   Inline style: jQuery width(): 378 .css('width'): 378px .style.width: 10cm External stylesheet: jQuery width(): 378 .css('width'): 378px .style.width: 

Answer 3

.width()將為您提供所應用的內容.css('width')將為您提供style屬性中的內容

Answer 4

.css('width')返回附加單位的屬性，而.width()則沒有，它會以像素為單位給出數字。

因此，如果你有一個寬度為200px的元素.css('width')將返回“200px”，而.width()將返回200。

Answer 5

“預期寬度”與實際寬度之間也存在差異。 .width()將為您提供元素的內容寬度， .css("width")將為您提供樣式表所預期的寬度。