23

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

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

我猜有些事情可以做而另一件做不到，因为我css()用来返回窗口和文档的尺寸，FF 这样做没有问题，但 IE 向我抛出了一个错误。所以我猜测它们可能适用于某些浏览器和其他浏览器。那么我是否必须同时使用两者才能实现 100% 的跨浏览器兼容性或仅在某些情况下？

4

10 回答 10

16

从.height()文档中-

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

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

于 2012-11-07T22:45:44.047 回答
10

伙计们一直在问，没有人能真正告诉我使用 .css('width') 和 .css('height') 而不是 .width() 和 .height() 的好处。

查询 CSS 将为您提供应用的值，如 in5px或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
于 2012-11-07T23:05:41.423 回答
7 
var elH = someElement.height();           // 200

.height()返回一个Number，而

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

上面的 jQuerystyle像 JS 一样访问元素的属性：

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

中返回一个字符串值px。

于 2012-11-07T22:55:04.717 回答
2

他们还将返回/设置不同的值（不是在谈论“px”后缀）

如果你有box-sizing: border-box

看这个例子： http: //jsbin.com/fugusixila/edit ?html,css,js,console,output

于 2016-06-23T14:59:39.057 回答
1

我提供了这个答案，因为问题是询问您可以做的事情，css()反之亦然width()。隐藏的页面元素有一个有趣的案例。

我最近遇到了一种情况，我需要动态移动一些有时隐藏的元素，有时在页面加载时不需要。当元素没有被隐藏时，很容易只使用元素的实际宽度来创建新的 DOM 结构。但是当元素被隐藏时，使用.width() returned 0，并且正确地如此。所以我需要向元素类添加一些 CSS 宽度信息，然后我可以创建一个类似的语句

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

这使我能够确保我在可用时使用宽度，而且还为隐藏元素时提供了一个后备值。

希望这能加深对这两种方法的区别的理解。

于 2012-11-07T23:58:22.393 回答
0

.width 返回一个无单位的值，其中 .css("width") 返回 css 值，宽度应与数学计算一起使用

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

于 2012-11-07T22:46:20.747 回答
0

是的！
主要的是，正如大多数人所说的“ .height() 返回一个无单位的像素值”。

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


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

所以，如果我可以补充，每次处理原生独立时都使用“ CSS ”dim's浏览器反应 - 在响应式窗口/div 重新尺寸调整过程中计算/响应元素配置非常方便。 使用width() / height()计算JQuery效果结果，例如 hide()/show() 内层（您知道不会影响 CSS ）。 还要注意，例如，CSS 属性不包括填充、边框或边距（您没有

height
height内部X /外部X CSS 暗淡）。所以必须计算这些。

看一下jQuery：获取 jQuery 中隐藏元素的高度

于 2014-03-21T13:22:22.770 回答
0

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

还是应该？

根据我的发现，我对各种选项进行了一些速度测试：

  1. 用.css
  2. 设置宽度更快.width

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

$('#element1').width(parseInt($('#element2').css('width'), 10));
于 2015-02-06T17:39:08.093 回答
0

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

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

于 2015-09-21T15:10:33.890 回答
0

由于这是当我试图记住两者之间的区别时谷歌的第一次点击，我想我会用一个例子来解释一下。

我有一个名为 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', '')) + 991199。否则你会得到 110099 作为答案。

于 2017-05-08T13:33:39.803 回答