如何以像素为单位获取<div>的高度

Question

我使用jQuery库来查找一个

元素的高度。

下面是我的

元素及其属性：

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>

这是我的jQuery代码，用于获取<div>的高度。

var result = $("#myDiv").css('height');
alert(result);

执行上述语句后，我得到的结果是"auto"。实际上这不是我期望的，而是我希望结果以像素为单位。

- pravin

---

可能是如何获取元素的渲染高度？的重复问题。 - Penny Liu

Answer 1

尽管它们在检索高度值方面略有不同，例如有些会计算整个元素的高度，包括填充、边距、滚动条等，而其他一些则只计算元素的原始高度。

您可以尝试以下方法：

javascript:

var myDiv = document.getElementById("myDiv");
myDiv.clientHeight;
myDiv.scrollHeight;
myDiv.offsetHeight;

或者使用jQuery：

$("#myDiv").height();
$("#myDiv").innerHeight();
$("#myDiv").outerHeight();

- Shaoz

---

在想要避免使用jQuery的情况下，将其转换为JavaScript时非常有用。 - IgniteCoders

大多数答案似乎都忘记了'scrollHeight'！而且......大多数时候，当系统被引导成多层Bootstrap时......它就是真正的！谢谢！您可以使用Math.round(Math.max(bodyDiv.clientHeight, bodyDiv.scrollHeight, bodyDiv.offsetHeight) || 0)。 - Pedro Ferreira

Answer 2

像这样使用.height()：

var result = $("#myDiv").height();

根据您的需求可以使用.innerHeight()和.outerHeight()函数，具体取决于您想要的效果。

您可以在这里测试，通过调整填充、边距和内容来查看它如何变化。

- Nick Craver

---

啊，见鬼了。你打败我只用了一分钟，而不是通常的2-20秒。+1（意为点赞或称赞） - djdd87

当我使用这个方法时，我总是得到1。 - Roy Hinkley

@AndroidAddict，你的内容是否全部都是通过 div 浮动实现的？如果是的话，请添加 overflow: auto 属性，这样高度就能正确地扩展到浮动元素之下。这是浮动元素的行为特点，可以添加边框来查看效果。 - Nick Craver

Answer 3

使用 height() 方法：

var result = $("#myDiv").height();
alert(result);

这将为您提供以像素为单位的无单位计算高度。结果中将去掉“px”。也就是说，如果高度为400像素，则结果将为400，但结果仍然将以像素为单位。

如果你想不使用jQuery实现，你可以使用纯JavaScript：

var result = document.getElementById("myDiv").offsetHeight;

- djdd87

---

感谢提供这个“原始”的JavaScript解决方案。 - peter.o

请注意，element.offsetHeight不考虑任何变换（例如transform: scale(0.5)）。如果您需要这些内容，则最好使用element.getBoundingClientRect().height。 - luckydonald

Answer 4

有一个内置的方法可以获取边界矩形：Element.getBoundingClientRect。

结果是包含整个元素的最小矩形，具有只读的 left、top、right、bottom、x、y、width 和 height 属性。

请参见下面的示例：

最初的回答：

let innerBox = document.getElementById("myDiv").getBoundingClientRect().height;
document.getElementById("data_box").innerHTML = "height: " + innerBox;

body {
  margin: 0;
}

.relative {
  width: 220px;
  height: 180px;
  position: relative;
  background-color: purple;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 20px;
  background-color: orange;
  padding: 30px;
  overflow: hidden;
}

#myDiv {
  margin: 20px;
  padding: 10px;
  color: red;
  font-weight: bold;
  background-color: yellow;
}

#data_box {
  font: 30px arial, sans-serif;
}

Get height of <mark>myDiv</mark> in px dimension:
<div id="data_box"></div>
<div class="relative">
  <div class="absolute">
    <div id="myDiv">myDiv</div>
  </div>
</div>

- Penny Liu

Answer 5

对于那些寻找纯JS解决方案的人：

let el = document.querySelector("#myElementId");

// including the element's border
let width = el.offsetWidth;
let height = el.offsetHeight;

// not including the element's border:
let width = el.clientWidth;
let height = el.clientHeight;

了解更多详情请点击这篇文章。

- user993683