使用JavaScript获取div高度

小开

< a href = " http://jsfiddle.net/zFTMX/ " > jsFiddle < / >

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

小开

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

clientHeight和clientWidth就是你要找的。

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

希望这能有所帮助。

小开

最佳答案

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

或

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

clientHeight包含填充。

offsetHeight包括padding, scrollBar和border。

小开

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

你只需要height和width来排除填充。

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

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

小开

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

Jsfiddle

小开

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

例子:

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

< p >更新: 下面是2020年编写的相同代码:

const elem = document.querySelector("#myDiv");
if(elem) {
const rect = elem.getBoundingClientRect();
console.log(`height: ${rect.height}`);
}

小开

除了el.clientHeight和el.offsetHeight，当你需要元素内部内容的高度时(不管元素本身的高度设置)，你可以使用el.scrollHeight。更多信息

如果你想将元素高度或max-height设置为内部动态内容的精确高度，这可能很有用。例如:

var el = document.getElementById('myDiv')


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

小开

试一试

myDiv.offsetHeight

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

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

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

小开

这里还有一个选择:

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


}

小开

一种选择是

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

小开

最好的办法是——

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>

小开

HTMLElement.style返回已定义的元素样式
clientHeight - height + padding
offsetHeight - height + padding +边框
scrollHeight返回高度+填充
getBoundingClientRect () -返回left, top, right, bottom, x, y，宽度和高度属性
getComputedStyle () -返回元素的所有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>