Javascript 如何以px尺寸获取<div>的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3839227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get height of <div> in px dimension
提问by pravin
I have used jQuery library to find out height of a div.
我已经使用 jQuery 库来找出div.
Below is my divelement with attributes :
以下是我的div具有属性的元素：
<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>
Below is my jQuery code to get height of <div>
下面是我的 jQuery 代码来获取高度 <div>
var result = $("#myDiv").css('height');
alert(result);
After executing above statement I am getting result as "auto". Actually this is I am not expecting, instead of that I want the result in px dimension.
执行上述语句后，我得到的结果为“自动”。实际上这是我不期望的，而不是我想要 px 维度的结果。
回答by Shaoz
Although they vary slightly as to how they retrieve a height value, i.e some would calculate the whole element including padding, margin, scrollbar, etc and others would just calculate the element in its raw form.
You can try these ones:
尽管它们在检索高度值的方式方面略有不同，即有些人会计算整个元素，包括填充、边距、滚动条等，而其他人只会计算原始形式的元素。
你可以试试这些：
javascript:
javascript:
var myDiv = document.getElementById("myDiv");
myDiv.clientHeight;
myDiv.scrollHeight;
myDiv.offsetHeight;
or in jquery:
或在 jquery 中：
$("#myDiv").height();
$("#myDiv").innerHeight();
$("#myDiv").outerHeight();
回答by Nick Craver
Use .height()like this:
.height()像这样使用：
var result = $("#myDiv").height();
There's also .innerHeight()and .outerHeight()depending on exactlywhat you want.
还有.innerHeight()和.outerHeight()取决于正是你想要的。
You can test it here, play with the padding/margins/content to see how it changes around.
你可以在这里测试，使用 padding/margins/content 看看它是如何变化的。
回答by djdd87
Use height():
使用height()：
var result = $("#myDiv").height();
alert(result);
This will give you the unit-less computed height in pixels. "px" will be stripped from the result. I.e. if the height is 400px, the result will be 400, but the result will be in pixels.
这将为您提供以像素为单位的无单位计算高度。“px”将从结果中删除。即如果高度为 400px，结果将为 400，但结果将以像素为单位。
If you want to do it withoutjQuery, you can use plain JavaScript:
如果你想在没有jQuery 的情况下做到这一点，你可以使用普通的 JavaScript：
var result = document.getElementById("myDiv").offsetHeight;
回答by djdd87
For those looking for a plain JS solution:
对于那些寻找纯 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;
Check out this articlefor more details.
查看这篇文章了解更多详情。
回答by Penny Liu
There is a built-in method to get the bounding rectangle: Element.getBoundingClientRect.
有一个内置的方法来获取边界矩形：Element.getBoundingClientRect。
The result is the smallest rectangle which contains the entire element, with the read-only left, top, right, bottom, x, y, width, and heightproperties.
结果是包含整个元素的最小矩形，具有只读的 left、top、right、bottom、x、y、width 和 height属性。
See the example below:
请参阅下面的示例：
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>