使用普通JavaScript获取div高度

关于不使用jQuery来获得div高度的任何想法吗？
我正在搜索Stack Overflow这个问题，似乎每个答案都指向jQuery的.height()。
我尝试了类似myDiv.style.height的方法，但返回了什么也没有，即使我的div在CSS中设置了width和height。

stackoverflow.com/a/10118190/1172872

#1 楼

var clientHeight = document.getElementById('myDiv').clientHeight;

或

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight包括填充。

offsetHeight包括填充，scrollBar和边框。

在quirksmode.org/mobile/tableViewport_desktop.html下的ie10上，offsetheight不会起作用

–特色
15年8月26日在15:38

您还可以使用scrollHeight，其中包括所包含文档的高度，垂直填充和垂直边框。

–赛义德
15年12月24日在11:35

clientHeight还包含填充，因此不等同于$ .height（）

–伊芙
16年1月10日，下午1:58

边界和边缘也占据了空间。 :)并且您的答案暗示clientHeight不包含填充。这个问题同时提到$ .height（）和.style.height，都不包含填充，这表明提问者也不想这样做。

–伊芙
16年1月11日，下午5:29

注意：这允许您获取某物的高度，但是您不能使用它来更改元素的高度。参见：stackoverflow.com/questions/4925217/…

–瑞安·史密斯（Ryan Smith）
16年7月21日在14:27

#2 楼

另一个选择是使用getBoundingClientRect函数。请注意，如果元素的显示为“ none”，则getBoundingClientRect将返回一个空rect。
示例：

var elem = document.getElementById("myDiv");
if(elem) {
  var rect = elem.getBoundingClientRect();
  console.log("height: " + rect.height);  
}

更新：
这里是与2020年编写的代码相同：

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}

#3 楼

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

#4 楼

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight和clientWidth是您要查找的内容。

offsetHeight和offsetWidth也返回高度和宽度，但它包括边框和滚动条。根据情况，您可以使用其中一种。

希望有帮助。

#5 楼

其他答案对我不起作用。这是我在w3schools上发现的，假设div设置了height和/或width。 >
您的投票失败者：根据我收到的投票结果，此答案至少帮助了5个人。如果您不喜欢它，请告诉我原因，以便修复它。那是我最大的不高兴的表情。你很少告诉我为什么要投票。

我看不出w3schools如何说其他方法不准确。

– aknuds1
2015年10月8日13:31

#6 楼

尝试

myDiv.offsetHeight

 console.log("Height:", myDiv.offsetHeight );

 #myDiv { width: 100px; height: 666px; background: red}

 <div id="myDiv"></div>

#7 楼

除了el.clientHeight和el.offsetHeight之外，当您需要元素内部内容的高度（无论元素本身设置的高度如何）时，都可以使用el.scrollHeight。更多信息

如果要将元素高度或max-height设置为内部动态内容的确切高度，这将很有用。例如：

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

#8 楼

这是另一种选择：

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;
        }

    }

#9 楼

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

#10 楼

一种选择是

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);

编程黑洞网