如何以像素为单位获取x%的高度？

Question

我将一个div元素的高度设为100％，现在我想知道实际的像素高度。
如何查找该div元素的高度？

- vin

---

@NishuTayal：height() 不包括填充、边框或外边距，这可能是或不是某人需要的。如果 height() 不能返回所需结果，请使用 innerHeight() 来包含填充，outerHeight() 来包含填充和边框，以及 outerHeight(true) 来包含填充、边框和外边距。 - Nope

Answer 1

使用 jQuery，当 container 是该 div 的 id 时，可以这样做：

$(document).ready(function() {
    alert($('#container').height());
});

- WolvDev

Answer 2

使用jQuery，您可以使用以下代码：

$('#div').height();

该代码可用于获取id为“div”的元素的高度。

- Amaerth

Answer 3

如上所述，使用jQuery可以使用以下内容：

$(document).ready(function(){
   $("#container").height();
});

请注意，jQuery计算height的方式。引用自文档：

请注意，无论CSS box-sizing属性的值是什么，.height()始终会返回内容的高度。

这意味着它会忽略任何已应用的边距、填充和边框。

可以使用以下未提及的替代方法获取您感兴趣的确切高度: innerHeight()

$(document).ready(function(){
   $("#container").innerHeight();
});

如果您不仅想获取元素的高度，还想包括任何填充，请使用此方法。

outerHeight()

$(document).ready(function(){
   $("#container").outerHeight(); //Include padding and borders
   $("#container").outerHeight(true); //Include padding, borders and margins
});

如果您想获取元素的高度，还包括任何填充、边框和外边距（如果将true作为参数传递），请使用此选项。

请参见DEMO

该演示显示了一个div应用的高度为300px。此外，CSS应用了20px的margin-top、50px的padding-top以及5px的边框，这些都会影响总高度。

height()的演示输出

请注意，jQuery height()仍然只返回300像素，忽略通过css添加到元素的附加高度。

innerHeight()的演示输出

请注意，jQuery innerHeight()返回350像素，即div的300像素+50像素的padding。

outerHeight()的演示输出

请注意，jQuery outerHeight()返回360像素，即div的300像素+50像素的padding + 10像素的边框（底部5像素和顶部5像素）。

outerHeight(true)的演示输出

请注意，jQuery outerHeight(true)返回380像素，即div的300像素+50像素的padding + 10像素的边框（底部5像素和顶部5像素）+20像素的margin。

- Nope

Answer 4

这是一个不使用jQuery的解决方案。

document.querySelector("#yourElementIdGoesHere").getBoundingClientRect();

此函数将返回一个具有以下属性的对象

• 底部
• 高度
• 左侧
• 右侧
• 顶部
• 宽度

从中获取宽度和高度，它们以像素为单位

—N

- Nacho