Question

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

以下是我的div元素，其中包含属性：

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

下面是我的jQuery代码，以获得<div>

的高度

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

执行上述语句后，我得到的结果为“auto”。实际上这是我没想到的，而不是我希望结果是px维度。

Answer 1

虽然它们如何检索高度值略有不同，即有些人会计算整个元素，包括填充，边距，滚动条等，其他人只会以原始形式计算元素。
你可以试试这些：

的javascript：

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

或在jquery中：

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

Answer 2

像这样使用.height()：

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

还有.innerHeight()和.outerHeight()取决于完全您想要的内容。

You can test it here，使用填充/边距/内容来查看它是如何变化的。

Answer 3

使用height()：

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

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

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

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

Answer 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了解更多详细信息。

Answer 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>

如何在px维度</div>中获得<div>的高度

5 个答案: