使用纯 JavaScript 获取 div 高度

Question

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

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

我尝试了类似 myDiv.style.height 的方法，但它什么也没返回，即使我的 div 在 CSS 中设置了 width 和 height。

Answer 1

jsFiddle

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

Answer 2

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

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

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

希望这会有所帮助。

Answer 3

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

或

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

clientHeight 包括填充。

offsetHeight 包括内边距、滚动条和边框。

Answer 4

其他答案对我不起作用。这是我在w3schools 找到的，假设div 有一个height 和/或width 集。

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

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

你们反对者：从我收到的赞成票来看，这个答案至少帮助了 5 人。如果您不喜欢它，请告诉我原因，以便我可以修复它。那是我对投票的最大不满；你很少告诉我你为什么投反对票。

Answer 5

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

Jsfiddle

Answer 6

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

例子：

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

Answer 7

除了el.clientHeight和el.offsetHeight之外，当你需要元素内内容的高度（不管元素本身设置的高度）你可以使用el.scrollHeight。 more info

如果您想将元素高度或最大高度设置为其内部动态内容的确切高度，这会很有用。例如：

var el = document.getElementById('myDiv')

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

Answer 8

试试

myDiv.offsetHeight 

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

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

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

Answer 9

这里还有另一种选择：

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 10

一种选择是

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

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

Answer 12

最好的办法是——

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

var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width;
var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight  || (myDiv.getBoundingClientRect()).height;
          
console.log("Width: "+ myDivWidth + "px");
console.log("Height: "+ myDivHeight + "px");

<div style="padding: 50px; margin: 8px auto; outline: 1px solid green;">

  <div id="myDiv" style="width: 100%; height: 256px; padding: 50px; margin: 4px; background: #000000; color: #ffffff; outline: 1px solid red;">
  This is "#myDiv" <br>
  Width: 100% <br>
  Height: 256px
  </div>

</div>