关于如何不使用jQuery获得div的高度有什么想法吗?

我在Stack Overflow中搜索这个问题,似乎每个答案都指向jQuery的.height()。

我尝试了myDiv.style。但是它没有返回任何东西,即使我的div在CSS中设置了它的宽度和高度。


当前回答

除了el。clientHeight和el。当你需要元素内部内容的高度时(不管元素本身设置的高度),你可以使用el.scrollHeight。更多信息

如果你想将元素高度或max-height设置为内部动态内容的精确高度,这可能很有用。例如:

var el = document.getElementById('myDiv')

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

其他回答

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

杰斯菲德尔

其他答案对我不起作用。下面是我在w3schools找到的,假设div有一个高度和/或宽度设置。

你所需要的是高度和宽度来排除填充。

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

不看好你的人:从我收到的好评来看,这个答案至少帮助了5个人。如果你不喜欢,告诉我原因,我好弥补。这是我对反对票最大的不满;你很少告诉我你为什么投反对票。

一种选择是

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

or

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

clientHeight包含填充。

offsetHeight包括填充,滚动条和边界。

这里还有一个选择:

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

    }