用普通的JavaScript获取div高度

Question

关于如何在不使用jQuery的情况下获得div高度的任何想法？

我正在为此问题搜索堆栈溢出，似乎每个答案都指向jQuery的.height()。

我尝试了类似myDiv.style.height的东西，但它没有返回任何内容，即使我的div在CSS中设置了其width和height。

Answer 1

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

或

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

clientHeight包括填充。

offsetHeight包括填充，滚动条和边框。

Answer 2

jsFiddle

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

Answer 3

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

clientHeight和clientWidth是你在找什么。

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

希望这会有所帮助。

Answer 4

其他答案不适合我。这是我在w3schools找到的，假设div有height和/或width集。

所有你需要的是height和width排除填充。

var height = document.getElementById('myDiv').style.height; 
    var width = document.getElementById('myDiv').style.width; 

您downvoters：这个答案已经帮助至少5人，由我收到了upvotes判断。如果你不喜欢它，告诉我为什么我可以修复它。这是我最大的宠儿，你很少告诉我你为什么会失望。

Answer 5

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

Jsfiddle

Answer 6

另一种选择是使用getBoundingClientRect功能。请注意，如果元素的显示为'none'，getBoundingClientRect将返回一个空矩形。

例子：

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