13

.width()jQuery、.css('width')jQuery 和.style.width节点上的属性返回的值有什么区别？

我很好奇，因为在尝试将两个表格单元格的宽度设置为相等时，前两个给了我相同的错误答案。他们实际测量的是什么，为什么它与我.style在浏览器中查看元素时在属性中看到的值不同？

4

5 回答 5

7

来自width官方文档

.css(width) 和 .width() 的区别在于后者返回一个没有单位的像素值（例如，400），而前者返回一个没有单位的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用 .width() 方法。

我想说.css('width')和.style.withascss()方法用于设置样式对象属性之间没有区别。

.css('width')/.width()和之间的区别在于.style.withjQuery 方法使用window.getComputedStyle( elem, null ). 此方法用于在应用 CSS 和样式后读取实际属性。

于 2013-07-05T18:29:04.610 回答
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:
于 2013-07-05T18:38:50.580 回答
0

.width()将为您提供应用 .css('width')的内容将为您提供样式属性中的内容

于 2013-07-05T18:29:13.043 回答
0

.css('width')返回附加单位的属性，而.width()没有，它会给你以像素为单位的数字。

因此，如果您有一个宽度为 200px 的元素.css('width')将返回“200px”，而.width()将返回 200。

于 2013-07-05T18:31:26.080 回答
0

“预期宽度”与实际宽度也存在差异。.width()将为您提供元素的内容宽度，.css("width")将为您提供样式表预期的宽度。

于 2013-07-05T18:32:49.407 回答