Dapatkan ketinggian div dengan JavaScript biasa

Ada ide tentang cara mendapatkan tinggi div tanpa menggunakan jQuery?

Saya sedang mencari Stack Overflow untuk pertanyaan ini dan sepertinya setiap jawaban menunjuk ke jQuery .height().

Saya mencoba sesuatu seperti myDiv.style.height, tetapi tidak mengembalikan apa-apa, bahkan ketika div saya memilikinya widthdan heightdiatur dalam CSS.

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

atau

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

clientHeight termasuk padding.

offsetHeight termasuk padding, scrollBar, dan border.

jsFiddle

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

Opsi lain adalah menggunakan fungsi getBoundingClientRect. Harap dicatat bahwa getBoundingClientRect akan mengembalikan kotak kosong jika tampilan elemen 'tidak ada'.

Contoh:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}

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

clientHeight dan clientWidth adalah apa yang Anda cari.

offsetHeight dan offsetWidth juga mengembalikan tinggi dan lebar tetapi mencakup border dan scrollbar. Bergantung pada situasinya, Anda dapat menggunakan salah satunya.

Semoga ini membantu.

Jawaban lain tidak berhasil untuk saya. Inilah yang saya temukan di w3schools , dengan asumsi divmemiliki heightdan / atau widthmengatur.

Yang Anda butuhkan adalah heightdan widthuntuk mengecualikan padding.

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

Anda downvoters: Jawaban ini telah membantu setidaknya 5 orang, menilai dari upvotes yang saya terima. Jika Anda tidak menyukainya, katakan mengapa saya bisa memperbaikinya. Itu adalah hewan peliharaan terbesar saya dengan downvotes; Anda jarang memberi tahu saya mengapa Anda menurunkannya.

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

Jsfiddle

Selain el.clientHeightdan el.offsetHeight, saat Anda membutuhkan ketinggian konten di dalam elemen (terlepas dari tinggi yang ditetapkan pada elemen itu sendiri), Anda dapat menggunakannya el.scrollHeight. Info lebih lanjut

Ini bisa berguna jika Anda ingin mengatur tinggi elemen atau tinggi maksimum ke ketinggian yang tepat dari konten dinamis internal. Sebagai contoh:

var el = document.getElementById('myDiv')

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

mencoba

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Berikut satu alternatif lagi:

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

    }

Satu opsi adalah

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