Question

我一直在问周围的人，没有人能真正告诉我使用.css(‘width’)和.css(‘height’)而不是.width()和.height()的好处。

我知道它们都返回偏移尺寸，这是元素的真实尺寸，无论它的内部内容有多么拉伸。

我猜测有些东西可以做，而另一个则不能，因为我使用css()来返回窗口和文档的尺寸，其中FF没有问题这样做但是IE扔了给我一个错误。所以我猜他们可能在某些浏览器和其他浏览器中工作。那么我是否必须同时使用它们以实现100％跨浏览器兼容性或仅针对某些情况？

Answer 1

来自.height()文档 -

.css（'height'）和.height（）之间的区别在于后者返回无单位像素值（例如，400），而前者返回a单位的值保持不变（例如，400px）。当需要在数学计算中使用元素的高度时，建议使用.height（）方法。

如果您需要在计算中使用高度，请使用.height()获取值。

Answer 2

伙计们一直在四处询问，没有人能真正告诉我这些好处使用.css（'width'）和.css（'height'）而不是.width（）和 .height（）。

查询CSS会为您提供应用值，如5px或1em或分配给它的大小。

使用jQuery，您可以使用以下方法：

.height（元素高度，没有填充，边距或边框）
.innerHeight（元素高度+填充）
.outerHeight（元素高度+填充和边框）
.outerHeight(true)（元素高度+填充+边框+边距）
.width（元素宽度，没有填充，边距或边框）
.innerWidth（元素宽度+填充）
.outerWidth（元素宽度+填充和边框）
.outerWidth(true)（元素宽度+填充+边框+边距）

所有这些方法都只返回一个数字，表示高度/宽度单位（以像素为单位）。

使用jQuery的好处是跨浏览器，你可以更多   通过能够忽略/包括控制精确的宽度/高度   边距，填充或边框。

此外，由于这些方法总是将单位作为普通单位返回   如前所述，使用它们更容易计算   你不需要担心测量本身，即：px，em，   等。

DEMO - 演示高度方法（同样适用于宽度）

上面的演示使用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

Answer 3

var elH = someElement.height();           // 200

.height()会返回数字，而

var elH = someElement.css("height");      // "200px"

以上jQuery访问元素的style属性，就像JS中的那样：

var height = someDOMelement.style.height; // "200px"

在px中返回字符串值。

Answer 4

他们也会返回/设置不同的值（不是说'px'后缀）

如果您有box-sizing: border-box

请参阅此示例：http://jsbin.com/fugusixila/edit?html,css,js,console,output

Answer 5

我提供了这个答案，因为问题是询问您可以使用css()而不是width()执行的操作，反之亦然。隐藏的页面元素有一个有趣的案例。

我最近有一种情况，我需要动态移动一些有时隐藏的元素，有时不会在页面加载时移动。当元素未被隐藏时，很容易使用元素实际宽度来创建新的DOM结构。但是当使用.width() returned 0隐藏元素时，这是正确的。所以我需要在元素类中添加一些CSS宽度信息，然后我就能创建一个像

这样的语句

var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();

这使我能够确保在可用时使用宽度，同时还提供隐藏元素时的后备值。

希望这增加了对使用这两种方法可以做什么之间差异的理解。

Answer 6

.width返回无单位值，其中.css（“width”）返回css值，width应与数学计算一起使用

http://api.jquery.com/width/

Answer 7

叶氏！
主要的是，因为大多数人都告诉“ .height（）返回无单位像素值 ”。

但问题仍然存在：为什么会这样......？......为什么这样想？

@Jay Blanchard很好地说：“ 当需要在数学计算中使用元素的高度时，建议使用.height（）方法。 ”

因此，如果我可以添加，每次处理本机独立浏览器反应时都使用“ CSS ”dim - 非常方便计算/响应响应窗口上的元素处理/ div重新维度过程。

使用 width（） / height（）来计算 JQuery 效果结果，例如hide（）/ show（）内层（如您所知< strong>不会影响CSS height）另请注意，CSS height属性，例如，不包括填充，边框或边距（您没有内部 X / 外部 X CSS dim's）。所以必须计算这些
看看jQuery: Get height of hidden element in jQuery

Answer 8

到现在为止，人们应该知道一个人应该用于数学，另一个人不应该......

还是应该？

我根据我的发现对各种选项做了一点speed test：

使用.css
使用.width

换句话说，要抓住一些东西并设置另一个，你可能应该：

$('#element1').width(parseInt($('#element2').css('width'), 10));

Answer 9

＆＃34; .height（）将始终返回内容高度，无论CSS box-sizing属性的值如何。从jQuery 1.8开始，这可能需要检索CSS高度加上box-sizing属性，然后在元素具有box-sizing：border-box时减去每个元素上的任何潜在边框和填充。为了避免这种惩罚，请使用.css（＆＃34; height＆＃34;）而不是.height（）＆＃34;

http://api.jquery.com/height/

.css（'width'）和.css（'height'）与.width（）和.height（）

9 个答案:

DEMO - 演示高度方法（同样适用于宽度）