伙计们，我一直在问，没有人能真正告诉我使用 .css(‘width’) 和 .css(‘height’) 而不是 .width() 和 .height() 的好处。
我知道它们都返回偏移尺寸，这是元素的真实尺寸，无论它的内部内容如何拉伸。
我猜有些事情可以做而另一件做不到，因为我使用css() 返回窗口和文档的尺寸，FF 没有问题，但 IE 退回了一个我的错误。所以我猜测它们可能适用于某些浏览器和其他浏览器。那么我是否必须同时使用两者才能实现 100% 的跨浏览器兼容性或仅在某些情况下使用？
【问题讨论】：
.css('width') 返回带有单位的值 (5px)。 .width() 以数字形式返回宽度（以像素为单位）。
标签： jquery
来自.height() 文档 -
.css('height') 和 .height() 的区别在于 后者返回一个无单位的像素值（例如 400） 而 前者返回一个单位不变的值（例如 400 像素）。当需要在数学计算中使用元素的高度时，建议使用 .height() 方法。
如果您需要在计算中使用高度，请使用 .height() 获取值。
【讨论】：
我一直在问，没有人能真正告诉我好处 使用 .css('width') 和 .css('height') 而不是 .width() 和 .height()。
查询 CSS 将为您提供 5px 或 1em 中的应用值或分配给它的任何大小。
使用jQuery可以使用以下方法：
.height（元素高度，无内边距、边距或边框）.innerHeight（元素高度+内边距）.outerHeight（元素高度 + 内边距和边框）.outerHeight(true)（元素高度+内边距+边框+边距）.width（元素宽度，无内边距、边距或边框）.innerWidth（元素宽度+填充）.outerWidth（元素宽度 + 内边距和边框）.outerWidth(true)（元素宽度+内边距+边框+边距）所有这些方法都将只返回一个数字，表示以像素为单位的高度/宽度单位。
使用 jQuery 的好处是跨浏览器，您可以更深入地使用 通过能够忽略/包含来控制确切的宽度/高度 边距、填充或边框。
此外，因为这些方法总是将单位返回为普通的 数字更容易用它们计算，如前所述 您无需担心测量本身，即：
px、em、 等等。
上面的演示使用了一个div：
<div id="myDiv">My Div</div>
使用以下 CSS：
div{
border: 1px solid blue;
padding: 5px;
margin: 10px;
}
使用这个脚本：
var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);
var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);
结果如下：
height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
【讨论】：
px结尾的字符串，即使设置为其他单位。 jQuery says：“...计算的尺寸样式几乎总是像素...”（不确定“几乎”是什么意思。）
var elH = someElement.height(); // 200
.height() 返回一个数字，而
var elH = someElement.css("height"); // "200px"
上面的 jQuery 访问元素的 style 属性，就像 JS 一样：
var height = someDOMelement.style.height; // "200px"
在px 中返回一个字符串 值。
【讨论】：
它们还将返回/设置不同的值（不是在谈论“px”后缀）
如果你有box-sizing: border-box
看这个例子：http://jsbin.com/fugusixila/edit?html,css,js,console,output
【讨论】：
我提供了这个答案，因为问题是关于你可以用css() 而不是width() 做的事情，反之亦然。隐藏的页面元素有一个有趣的案例。
我最近遇到了一种情况，我需要动态移动一些有时隐藏的元素，有时在页面加载时不需要。当元素没有被隐藏时，很容易只使用元素的实际宽度来创建新的 DOM 结构。但是当元素被隐藏时，使用.width() returned 0，这是正确的。所以我需要向元素类添加一些 CSS 宽度信息，然后我可以创建一个类似
var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();
这使我能够确保我在宽度可用时使用它，而且还为隐藏元素时提供一个备用值。
希望这有助于您了解这两种方法之间的区别。
【讨论】：
.width 返回一个无单位的值，其中 .css("width") 返回css值，宽度应与数学计算一起使用
【讨论】：
是的！
主要的是，正如大多数人所说的“.height() 返回一个无单位的像素值”。
但问题仍然存在：为什么会这样......？......为什么会有这样的想法？
@Jay Blanchard 说得好：“当需要在数学计算中使用元素的高度时，推荐使用 .height() 方法。”
因此，如果我可以添加，每次处理原生 独立 浏览器反应时都使用“CSS”dim - 非常方便计算/响应响应式窗口上的元素配置/div 重新维度处理。
使用 width() / height() 计算 JQuery 效果结果，如 hide()/show() 内层（如你所知 不会影响 CSS height)。
另请注意，CSS height 属性，例如，不包括填充、边框或边距（您没有 inner X / outer em> X CSS 暗淡的）。所以必须计算这些。
看看jQuery: Get height of hidden element in jQuery
【讨论】：
现在人们应该知道一个应该用于数学，另一个不应该......
还是应该？
根据我的发现，我在各种选项上做了一点speed test：
.css抓取宽度更快
.width设置宽度更快
因此，换句话说，要抓住一些东西并设置另一个，你可能应该：
$('#element1').width(parseInt($('#element2').css('width'), 10));
【讨论】：
.css('width') 和 .width() 在每个情况下返回不同的东西。 .css 返回一个字符串，.width 返回一个整数。因此，在.css 上使用parseInt 以返回与.width 自己返回的相同。所以恐怕是你的理解是错误的，而不是答案。我看到您对其他两个甚至专门显示此信息的答案也发表了相同的评论，所以我猜您只是一个巨魔。
".height() 将始终返回内容高度，无论 CSS box-sizing 属性的值如何。从 jQuery 1.8 开始，这可能需要检索 CSS height 加上 box-sizing 属性，然后减去任何潜在的边框并在元素具有 box-sizing:border-box 时在每个元素上进行填充。为避免这种惩罚，请使用 .css("height") 而不是 .height()"
【讨论】：
由于这是我在尝试记住两者之间的区别时在 google 中的第一次点击，所以我想我会用一个例子来解释一下。
我有一个名为 myDiv 的 div，如下所示：
border:1px solid black;
padding-right: 15px;
padding-left:15px;
margin-right:10px;
margin-left:10px
控制台给了我这个：
$('#myDiv').css('width') = 1100px;
$('#myDiv').width() = 1068;
1100 包括右侧填充的 15 个像素、左侧填充的 15 个像素、边框的 2 个像素（每边 1 个）但不边距。至少对我来说铬。 1068+15+15+1+1 = 1100
是的，执行Number($('#myDiv').css('width').replace('px', '')) 会产生开销，但您每次只需执行一次。并且您必须将结果转换为数字，假设您希望 Number($('#myDiv').css('width').replace('px', '')) + 99 为 1199。否则您将得到 110099 作为答案。
【讨论】：
parseInt($('#myDiv').css('width'))，返回一个数字