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

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

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


当前回答

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

clientHeight和clientWidth就是你要找的。

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

希望这能有所帮助。

其他回答

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

clientHeight和clientWidth就是你要找的。

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

希望这能有所帮助。

这里还有一个选择:

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

try

myDiv.offsetHeight 

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

最好的办法是——

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>