关于如何不使用jQuery获得div的高度有什么想法吗?
我在Stack Overflow中搜索这个问题，似乎每个答案都指向jQuery的.height()。
我尝试了myDiv.style。但是它没有返回任何东西，即使我的div在CSS中设置了它的宽度和高度。
当前回答
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;
}
}
另一个选项是使用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}`);
}
js小提琴
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;
or
var offsetHeight = document.getElementById('myDiv').offsetHeight;
clientHeight包含填充。
offsetHeight包括填充，滚动条和边界。
