使用普通JavaScript获取div高度

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

我正在寻找Stack Overflow这个问题，似乎每个答案都指向jQuery的.height()。

我尝试了类似的方法myDiv.style.height，但是即使我的div具有CSS width并height在CSS中进行了设置，它也没有返回任何内容。

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

要么

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

clientHeight 包括填充。

offsetHeight 包括填充，scrollBar和边框。

jsFiddle

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

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

例：

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

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

clientHeight和clientWidth是您要寻找的。

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

希望这可以帮助。

其他答案对我不起作用。这是我在w3schools上发现的，假设div拥有height和和或width设置。

您所需要做的就是height并width排除填充。

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

您的投票失败者：根据我收到的投票结果，此答案至少帮助了5个人。如果您不喜欢它，请告诉我原因，以便我进行修复。那是我最大的不高兴的表情。您很少告诉我为什么要投票反对。

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

Jsfiddle

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

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

var el = document.getElementById('myDiv')

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

尝试

myDiv.offsetHeight 

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

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

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

这是另一种选择：

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

    }

一种选择是

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