logo标签列表

.css('width')和.css('height')与.width()和.height()的区别

jquery
23
大家好，我询问了一些人，他们无法真正告诉我使用 .css（'width') 和 .css（'height') 的好处，而不是使用 .width() 和 .height()。
我知道它们都返回偏移尺寸，这是元素的实际尺寸，无论其内部内容如何伸展。
我猜想其中一个可以做一些事情，而另一个则不能。例如，我使用css()来返回窗口和文档的尺寸，在Firefox中没有问题，但IE会向我返回错误。因此，我猜想它们可能在某些浏览器上工作，在其他浏览器上则不工作。所以，为了100％跨浏览器兼容性，我是否需要同时使用两种方法，还是只在某些情况下使用？
5
.css('width') 返回带单位的值（例如 5px）。 .width() 返回以像素为单位的宽度值，类型为数字。 - Blender
1
一个非常好的关于这个和其他内容的帖子：http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ - Robyflc
10个回答
16

从.height()文档 -

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

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

3
你错过了一个非常重要的事实，就是在某些情况下，.css("height")返回的结果与.height()不同。 - Xatenev
3
这正是文档所说的， @Xatenev，它们返回两个不同的东西。 - Jay Blanchard
6
实际上，我意思不同，很抱歉。.height()始终返回计算出的高度。这意味着，如果您有一个没有内容的<div>，它将返回0，但.css("height")将返回您在CSS中设置的<div>的高度，例如300px。在我看来，这是一个相当重要的事实，有时会导致奇怪的“问题”。 - Xatenev
这就是为什么文档中说：“当需要在数学计算中使用元素的高度时，建议使用 .height() 方法。” @Xatenev 你是在说我应该澄清这一点吗？ - Jay Blanchard
基本上，就在2个小时前，有人在IRC #jquery中遇到了我所描述的问题。他看到了这个stackoverflow线程，但是在那里找不到解决方案。 - Xatenev
显示剩余3条评论
10

我一直在询问周围的人使用.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 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
@roXon：我认为问题是使用其中一个的好处是什么。我认为这是不言而喻的。我添加了一条额外的引用，即使用jquery的方法的好处在于更精细的控制能力，可以根据需要包含/排除边距、填充和边框单位。我认为这是一个好处。不过，我知道你只需使用普通的CSS就可以完成所有这些操作。如果我误解了问题，请原谅。 - Nope
你的回答实际上非常好，+1 只需添加 $().css('property') 的示例即可。 - Roko C. Buljan
1
@roXon：我也提到了你关于计算值的说法。因为我最初完全忽略了这一点，所以给你加1分。如果你觉得还应该提到其他内容，请随意编辑我的帖子。 - Nope
查询CSS将给您应用的值，例如5px或1em...显然不是这样。即使使用其他单位进行设置，.css('width')始终返回以px结尾的字符串。jQuery说：“...尺寸的计算样式几乎总是像素...”（不确定“几乎”是什么意思）。 - Bob Stein
7
var elH = someElement.height();           // 200

.height() 返回一个 数字，而

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

上面的jQuery代码访问元素的style属性，就像JS代码一样：

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

将以px为单位的String值返回。

3
你错过了一个非常重要的事实，就是在某些情况下，.css("height")返回的结果与.height()不同。 - Xatenev
2
@Xatenev 没有，他把返回值放在代码注释中了。 - Jamie Barker
1
我有一个情况，我将一个DIV的高度设置为50像素。.height()返回39，而.css("height")返回50px。我不知道为什么，但在这种情况下，我更信任.css("height"). - Jonny
2
1
我提供了这个答案，因为问题是关于你可以使用css()而不是width()以及反之的事情。对于隐藏的页面元素有一个有趣的案例。
最近我遇到了一个情况，需要动态移动一些元素，这些元素在页面加载时有时被隐藏，有时不被隐藏。当元素没有被隐藏时，很容易使用元素的实际宽度来创建新的DOM结构。但是当元素被隐藏时，使用.width()返回0，这是正确的。所以我需要向元素类添加一些CSS宽度信息，从而能够创建像下面这样的语句：
var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();

这使我能够确保在可用时使用宽度，但也为元素隐藏时提供备用值。

希望这有助于理解这两种方法之间的区别。

0

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

或者应该吗？

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

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

因此换句话说，如果要抓取某个东西并设置另一个东西，您可能应该：

$('#element1').width(parseInt($('#element2').css('width'), 10));
.css('width')和.width()在每个情况下都返回不同的结果。.css返回一个字符串，而.width返回一个整数。因此，在.css上使用parseInt可以返回与单独使用.width相同的结果。所以我担心你的理解是错误的，而不是答案。我看到你在其他两个回答中放了相同的评论，所以我猜你只是一个喜欢捣乱的人。 - Jamie Barker
请查看我在Jay Blanchard的帖子下的评论。谢谢。 - Xatenev
0

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

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

0

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

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


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

所以，如果我可以补充一下，在处理本地独立浏览器反应时，每次使用“CSS”dim都非常方便，可以计算/响应响应式窗口/div重新调整过程中元素的位置。

使用width() / height()来计算JQuery效果结果，如隐藏()/显示()内部层（如您所知，不会影响CSS height）。
还要注意，例如CSS height属性不包括填充、边框或边距（您没有innerX / outerX CSS dim's）。因此，这些必须被计算。

请查看jQuery：获取jQuery中隐藏元素的高度。

0
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像素），但不包括边距。至少对我来说在Chrome中是这样的。1068+15+15+1+1 = 1100

是的，执行Number($('#myDiv').css('width').replace('px', ''))会有开销，但每次只需要执行一次。而且您必须将结果转换为数字，假设您希望Number($('#myDiv').css('width').replace('px', '')) + 99的结果为1199。否则，您将得到110099作为答案。

我已经有一段时间没有测试过这个了，但是关于类型转换部分，我相信 parseInt(string) 函数可以直接使用，而不需要 **.replace('px', '')**；像这样：parseInt($('#myDiv').css('width'))，返回一个数字。 - Scaramouche
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接