5

我给了一个 div 100% 的高度，我想要以 px 为单位的实际高度。
我怎样才能找出那个div的高度？

4

4 回答 4

6

使用 jquery，当容器是 div 的 id 时，您可以使用它：

$(document).ready(function() {
    alert($('#container').height());
});
于 2012-06-28T16:04:34.677 回答
4

使用 jQuery，您应该能够使用：

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

于 2012-06-28T16:05:53.073 回答
2

如前所述，使用 jQuery，您可以使用：

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

请注意虽然方式height是由 jQuery 计算的。从文档中引用：

请注意， .height() 将始终返回内容高度，无论 CSS box-sizing 属性的值如何。

这意味着，它将忽略您可能已应用的任何边距、填充和边框。

没有人提到您可以利用的替代方案来获得您感兴趣的确切高度如下：

内部高度（）

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

如果您不仅需要元素高度，还需要包含任何填充，请使用此选项。

外部高度（）

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

如果您不仅需要元素高度，还需要包含任何填充、边框和边距（如果将 true 作为参数传递），请使用此选项。

见演示

该演示展示了如何将 300px 的高度应用于 div。此外，css 应用了 20px 的 margin-top、50px 的 padding-top 以及 5px 的边框，它们都会影响总高度。

height() 的演示输出

请注意，尽管 jQueryheight()仍然只返回 300 像素，忽略通过 css 添加到元素的额外高度。

innerHeight() 的演示输出

注意 jQuery 如何innerHeight()返回 350 像素，即 div 的 300 + 填充的 50。

outerHeight() 的演示输出

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

outerHeight(true) 的演示输出

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

于 2012-06-28T16:23:25.373 回答
0

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

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

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

  • 底部
  • 高度
  • 剩下
  • 正确的
  • 最佳
  • 宽度

只需从那里获取宽度和高度，它们以像素为单位

—N

于 2016-06-27T13:54:35.590 回答