Html 使用纯 JavaScript 获取 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15615552/
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
Get div height with plain JavaScript
提问by lwiii
Any ideas on how to get a div's height without using jQuery?
关于如何在不使用 jQuery 的情况下获得 div 高度的任何想法？
I was searching Stack Overflow for this question and it seems like every answer is pointing to jQuery's .height().
我在 Stack Overflow 上搜索这个问题，似乎每个答案都指向 jQuery 的.height().
I tried something like myDiv.style.height, but it returned nothing, even when my div had its widthand heightset in CSS.
我尝试了类似的东西myDiv.style.height，但它什么也没返回，即使我的 div 有它width并height在 CSS 中设置。
回答by Dan
var clientHeight = document.getElementById('myDiv').clientHeight;
or
或者
var offsetHeight = document.getElementById('myDiv').offsetHeight;
clientHeightincludes padding.
clientHeight包括填充。
offsetHeightincludes padding, scrollBar and borders.
offsetHeight包括填充、滚动条和边框。
回答by Daniel Imms
回答by user4617883
Another option is to use the getBoundingClientRect function. Please note that getBoundingClientRect will return an empty rect if the element's display is 'none'.
另一种选择是使用 getBoundingClientRect 函数。请注意，如果元素的显示为“none”，则 getBoundingClientRect 将返回一个空矩形。
Example:
例子：
var elem = document.getElementById("myDiv");
if(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect.height);
}
回答by Keo Strife
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);
clientHeight and clientWidth are what you are looking for.
clientHeight 和 clientWidth 是您正在寻找的。
offsetHeight and offsetWidth also return the height and width but it includes the border and scrollbar. Depending on the situation, you can use one or the other.
offsetHeight 和 offsetWidth 也返回高度和宽度，但它包括边框和滚动条。根据情况，您可以使用一种或另一种。
Hope this helps.
希望这可以帮助。
回答by craned
The other answers weren't working for me. Here's what I found at w3schools, assuming the divhas a heightand/or widthset.
其他答案对我不起作用。这是我在w3schools发现的，假设div有一个height和/或width集合。
All you need is heightand widthto exclude padding.
所有你需要的是height和width排除填充。
var height = document.getElementById('myDiv').style.height;
var width = document.getElementById('myDiv').style.width;
You downvoters:This answer has helped at least 5 people, judging by the upvotes I've received. If you don't like it, tell me why so I can fix it. That's my biggest pet peeve with downvotes; you rarely tell me why you downvote it.
你们反对者：从我收到的赞成票来看，这个答案至少帮助了 5 人。如果您不喜欢它，请告诉我原因，以便我修复它。这是我对否决票最大的不满；你很少告诉我为什么你不赞成它。
回答by user3556121
回答by cronoklee
In addition to el.clientHeightand el.offsetHeight, when you need the height of the content inside the element(regardless of the height set on the element itself) you can use el.scrollHeight. more info
除了el.clientHeightand 之外el.offsetHeight，当您需要元素内部内容的高度时（无论元素本身设置的高度如何），您可以使用el.scrollHeight. 更多信息
This can be useful if you want to set the element height or max-height to the exact height of it's internal dynamic content. For example:
如果您想将元素高度或 max-height 设置为其内部动态内容的确切高度，这会很有用。例如：
var el = document.getElementById('myDiv')
el.style.maxHeight = el.scrollHeight+'px'
回答by Kamil Kie?czewski
try
尝试
myDiv.offsetHeight
console.log("Height:", myDiv.offsetHeight );#myDiv { width: 100px; height: 666px; background: red}<div id="myDiv"></div>回答by Pedro Coelho
Here's one more alternative:
这是另一种选择：
var classElements = document.getElementsByClassName("className");
function setClassHeight (classElements, desiredHeightValue)
{
var arrayElements = Object.entries(classElements);
for(var i = 0; i< arrayElements.length; i++) {
arrayElements[i][1].style.height = desiredHeightValue;
}
}
回答by SHIVANSH NARAYAN
One option would be
一种选择是
const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
