使用JavaScript获取div高度

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

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

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

当前回答

一种选择是

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

其他回答

Javascript高度计算

包括填充

使用clientHeight

element.clientHeight

使用offsetHeight

包括填充、边界、border_width

element.offsetHeight

使用el.style.height

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

element.style.height

使用getBoundingClientRect

包括填充、边境,border_width

elem.getBoundingClientRect();
elem.height

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

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

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

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

try

myDiv.offsetHeight

console.log(“高度:”,myDiv。offsetHeight); #myDiv{宽度:100px;身高:666 px;背景:红} < div id = " myDiv " > < / div >

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

杰斯菲德尔

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

例子:

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

推荐文章