使用纯JavaScript获取div高度

Question

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

我正在搜索Stack Overflow这个问题,似乎每个答案都指向jQuery .height().

我尝试了类似的东西myDiv.style.height,但它什么也没有返回,即使我的div有它width并且height设置在CSS中.

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

另一种选择是使用getBoundingClientRect函数.请注意,如果元素的显示为"none",则getBoundingClientRect将返回一个空矩形.

例:

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

Answer 4

1. HTMLElement.style - 返回元素的定义样式
2. clientHeight - 高度 + 填充
3. offsetHeight - 高度 + 内边距 + 边框
4. scrollHeight - 返回高度+内边距
5. getBoundingClientRect() - 返回左、上、右、下、x、y、宽度和高度属性
6. getCompatedStyle() - 返回元素的所有 CSS 属性

// returns defined Style of element
const styleHeight = document.getElementById('myDiv').style.height;
console.log('style Height : ', styleHeight);

// height + padding
const clientHeight = document.getElementById('myDiv').clientHeight;
console.log('client Height : ', clientHeight);

// height + padding + borders
const offsetHeight = document.getElementById('myDiv').offsetHeight;
console.log('offset Height : ', offsetHeight);

// height + padding
const scrollHeight = document.getElementById('myDiv').scrollHeight;
console.log('scroll Height : ', scrollHeight);

// return left, top, right, bottom, x, y, width, and height properties
const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);

// returns all CSS properties of an element
const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height;
console.log('style Element Height : ', styleElementHeight);

<div id="myDiv" style="margin:10px;padding:20px;height:200px;">
    <input type="Text">
    <input type="button" value="submit">
</div>

Answer 5

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

clientHeight和clientWidth是您正在寻找的.

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

希望这可以帮助.

Answer 6

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

您所需要的height只是width排除填充。

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