.css（’width’）和.css（’height’）与.width（）和.height（）
伙计们我一直在问，没有人能真正告诉我使用.css('width')和.css('height')而不是.width()和.height() 。
我知道它们都返回偏移尺寸，这是元素的真实尺寸，无论它的内部含量多么拉伸。
我猜测有一些事情可以做，而另一个不能，因为我使用css()返回窗口和文档的尺寸，其中FF没有问题这样做但是IE向我扔了一个错误。 所以我猜他们可能在某些浏览器和其他浏览器中工作。 那么我是否必须同时使用它们以实现100％跨浏览器兼容性或仅针对某些情况？
var elH = someElement.height(); // 200
.height()返回一个Number ，而
var elH = someElement.css("height"); // "200px"
以上jQuery访问元素的style属性，如JS所示：
var height = someDOMelement.style.height; // "200px"
在px返回String值。
从.height（）文档 –
.css（’height’）和.height（）之间的区别在于后者返回无单位像素值（例如，400），而前者返回单位完整的值（例如，400px） 。 当需要在数学计算中使用元素的高度时，建议使用.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：
My 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("
height with padding: " + heightWithPadding); $result.append("
height with padding and borders: " + heightWithPaddingAndBorder); $result.append("
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’后缀）
如果你有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值，width应与数学计算一起使用
叶氏！
主要的是，因为大多数人都告诉“ .height（）返回一个无单位像素值 ”。
但问题仍然存在：为什么会这样……？……为什么这样想？
@Jay Blanchard很好地说：“ 当需要在数学计算中使用元素的高度时，建议使用.height（）方法。 ”
因此，如果我可以添加，每次处理本机独立浏览器反应时都使用“ CSS ”dim – 非常方便计算/响应响应窗口/ div重新维度过程中的元素处置。
使用width（） / height（）来计算JQuery效果结果，比如hide（）/ show（）内层（因为你知道不会影响CSS height ）。
另请注意，CSS height属性（例如） 不包括填充，边框或边距（您没有内部 X / 外部 X CSS dim）。 所以必须计算这些。
看看jQuery：在jQuery中获取隐藏元素的高度
到现在为止，人们应该知道一个人应该用于数学，而另一个人不应该…
还是应该呢？
我根据我的发现对各种选项进行了一些速度测试 ：
- 使用
.css获取宽度会更快 - 使用
.width设置宽度会更快
换句话说，要抓住一些东西并设置另一个，你可能应该：
$('#element1').width(parseInt($('#element2').css('width'), 10));
“.height（）将始终返回内容高度，无论CSS box-sizing属性的值如何。从jQuery 1.8开始，这可能需要检索CSS高度加上box-sizing属性，然后减去任何可能的边框和填充。元素具有box-sizing时的每个元素：border-box。为避免这种惩罚，请使用.css（“height”）而不是.height（）“
由于这是谷歌在我试图记住两者之间的差异时的第一次打击，我想我会用一个例子给出更多的解释。
我有一个名为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', ''))但你每次只需要做一次。 并且你必须将结果转换为数字，假设你想要Number($('#myDiv').css('width').replace('px', '')) + 99为1199.否则你得到110099作为答案。