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

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

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


当前回答

另一个选项是使用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}`);
}

其他回答

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

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

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

var el = document.getElementById('myDiv')

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

最好的办法是——

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>

js小提琴

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

try

myDiv.offsetHeight 

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