使用JavaScript获取div高度

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

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

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

当前回答

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

其他回答

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

js小提琴

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

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

clientHeight和clientWidth就是你要找的。

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

希望这能有所帮助。

一种选择是

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

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

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

clientHeight包含填充。

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

推荐文章