關于如何在不使用jQuery的情況下獲得div的高度，有什么想法嗎？

我在棧溢出中搜索這個問題，似乎每個答案都指向jQuery。高度()。

我嘗試了類似myDiv.style.height的東西，但它沒有返回任何內容，即使我的Div在CSS中設置了寬度和高度。

或者

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

jsFiddle

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

// 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>

clientHeight和clientWidth就是你要找的。

offsetHeight和offsetWidth也返回高度和寬度，但它包括邊框和滾動條。視情況而定，你可以使用其中之一。

希望這有所幫助。

其他答案對我不起作用。這里是我在w3schools發現的，假設div設置了高度和/或寬度。

除了填充，你只需要高度和寬度。

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

各位選民:從我收到的支持票來看，這個答案至少幫助了5個人。如果你不喜歡它，告訴我為什么，這樣我可以修復它。這是我對反對票最大的不滿；你很少告訴我你為什么否決它。

除了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 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>

這里還有一個選擇:

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

Jsfiddle

javascript高度計算

包括填充

使用客戶端高度

element.clientHeight

使用偏高

包括填充、邊框、邊框寬度

element.offsetHeight

使用el.style.height

它只返回給定高度(必須有手動高度，例如:& ltdiv style = & quot高度:12px & quot& gt& lt/div & gt；否則它返回空結果

element.style.height

使用getBoundingClientRect

包括填充、邊框、邊框寬度

elem.getBoundingClientRect();
elem.height