Question

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

我正在搜索Stack Overflow这个问题，似乎每个答案都指向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

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

示例：

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

Answer 5

其他答案对我不起作用。这是我在w3schools找到的内容，假设div设置了height和/或width。

您只需height和width即可排除填充。

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

你是挫折者：从我收到的赞成票来看，这个答案至少帮助了5个人。如果你不喜欢它，告诉我为什么我可以解决它。这是我最大的宠儿：你很少告诉我你为什么要投票。

Answer 6

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

the MSDN sample

Answer 7

一个选项是

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

Answer 8

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

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

var el = document.getElementById('myDiv')

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

Answer 9

尝试

myDiv.offsetHeight

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

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

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

Answer 10

这是另一种选择：

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

    }

Answer 11

javascript 高度计算

包括填充

使用clientHeight

element.clientHeight

使用offsetHeight

包括内边距、边框、边框宽度

element.offsetHeight

使用el.style.height

它只返回给定的高度（必须有手动高度例如：<div style="height:12px"></div> 否则返回空结果

element.style.height

使用getBoundingClientRect

包括内边距、边框、边框宽度

elem.getBoundingClientRect();
elem.height

使用纯JavaScript获取div高度

11 个答案: