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'）将为您提供样式属性

中的内容

Answer 4

.css（'width'）返回附加单位的属性，而.width（）则没有，它会以像素为单位给出数字。

因此，如果你有一个宽度为200px的元素.css（'width'）将返回“200px”而.width（）将返回200.

Answer 5

“预期宽度”与实际宽度之间也存在差异。 .width（）将为您提供元素的内容宽度，.css（“width”）将为您提供样式表所需的宽度。

jQuery .width（），style.width和jQuery .css（'width'）之间有什么区别？

5 个答案: