如何在 px 维度中获取 <div> 的高度答案

【问题标题】：How to get height of <div> in px dimension如何在 px 维度中获取 <div> 的高度
【发布时间】：2011-04-19 20:21:06
【问题描述】：

我使用 jQuery 库来找出 div 的高度。

下面是我的带有属性的div 元素：

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

下面是我获取<div>高度的jQuery代码

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

执行上述语句后，我得到的结果为“自动”。实际上这是我没想到的，而不是我想要 px 尺寸的结果。

【问题讨论】：

How do you get the rendered height of an element?的可能重复

标签： javascript jquery html css

【解决方案1】：

尽管它们在检索高度值的方式上略有不同，即有些会计算整个元素，包括填充、边距、滚动条等，而另一些只会计算原始形式的元素。
你可以试试这些：

javascript：

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

或在 jquery 中：

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

【讨论】：

当你想避免使用 jQuery 时翻译成 javascript 非常有用
大部分答案都是为了忘记'scrollHeight'！而且....大多数时候，当系统有点像 Bootstraped 多层时...它是真实的！谢谢！你可以使用 Math.round(Math.max(bodyDiv.clientHeight, bodyDiv.scrollHeight, bodyDiv.offsetHeight) || 0)

【解决方案2】：

像这样使用.height()：

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

还有.innerHeight() 和.outerHeight()，具体取决于正是你想要什么。

You can test it here，玩一下 padding/margins/content 看看它是如何变化的。

【讨论】：

啊，什么鬼。 +1 击败我一分钟而不是通常的 2-20 秒。
我用这个方法总是得到1。
@AndroidAddict 你的内容都是偶然漂浮在 div 内的吗？如果是这样，给它一个overflow: auto，这样高度就会正确地扩展到浮动。这就是浮动的行为方式，给它一个边框来看看我的意思。

【解决方案3】：

使用height():

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

这将为您提供以像素为单位的无单位计算高度。 “px”将从结果中删除。 IE。如果高度为 400px，则结果为 400，但结果将以像素为单位。

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

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

【讨论】：

感谢“原始”javascript 解决方案。
请注意element.offsetHeight does not take into account 任何转换（例如transform: scale(0.5)）。如果您需要这些，element.getBoundingClientRect().height 更适合。

【解决方案4】：

对于那些寻找简单 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;

查看this article了解更多详情。

【讨论】：

【解决方案5】：

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

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

请看下面的例子：

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>

【讨论】：