使用纯 JavaScript 获取 div 高度

Posted 2023-02-22

【中文标题】使用纯 JavaScript 获取 div 高度

【英文标题】：Get div height with plain JavaScript

【发布时间】：2013-03-14 23:28:43

【问题描述】：

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

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

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

【问题讨论】：

***.com/a/10118190/1172872

【参考方案1】：

jsFiddle

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

【参考方案2】：

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

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

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

希望这会有所帮助。

【参考方案3】：

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

或

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

clientHeight 包括填充。

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

【讨论】：

offsetheight 在quirksmode.org/mobile/tableViewport_desktop.html987654321@下方的ie10上不工作

您也可以使用scrollHeight，其中包括包含文档的高度、垂直填充和垂直边框。

clientHeight 还包括填充，所以它不等同于$.height()

注意：这可以让你得到某物的高度，但你不能用它改变你的元素的高度。见：***.com/questions/4925217/…

【参考方案4】：

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

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

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

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

【讨论】：

我看不出 w3schools 怎么说其他方法不准确。

【参考方案5】：

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

Jsfiddle

【参考方案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`);

【参考方案7】：

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

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

var el = document.getElementById('myDiv')

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

【参考方案8】：

试试

myDiv.offsetHeight 

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

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

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

【参考方案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;
        

    

【参考方案10】：

一种选择是

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

【参考方案11】：

javascript 高度计算

包括填充

使用clientHeight

element.clientHeight

使用offsetHeight

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

element.offsetHeight

使用el.style.height

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

element.style.height

使用getBoundingClientRect

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

elem.getBoundingClientRect();
elem.height

【参考方案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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。