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

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

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


当前回答

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

or

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

clientHeight包含填充。

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

其他回答

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

try

myDiv.offsetHeight 

console.log(“高度:”,myDiv。offsetHeight); #myDiv{宽度:100px;身高:666 px;背景:红} < 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;
        }

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

杰斯菲德尔

一种选择是

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