Uzyskaj wysokość div za pomocą zwykłego kodu JavaScript

Question

Jakieś pomysły na to, jak uzyskać wysokość div bez używania jQuery?

Szukałem Stack Overflow dla tego pytania i wygląda na to, że każda odpowiedź wskazuje na jQuery's .height().

Próbowałem czegoś takiego jak myDiv.style.height, ale nic nie zwróciło, nawet jeśli mój div miał width i height w CSS.

Answer 1

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

lub

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

clientHeight obejmuje wypełnianie bloku danych.

zawiera wypełnienie, pasek przewijania i obramowania.

Answer 2

jsFiddle

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

Answer 3

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

clientHeight i clientWidth to, czego szukasz.

offsetHeight i offsetWidth również zwracają wysokość i szerokość, ale obejmują także obramowanie i pasek przewijania. W zależności od sytuacji możesz użyć jednego lub drugiego.

Mam nadzieję, że to pomoże.

Answer 4

Inne odpowiedzi nie działają dla mnie. Oto, co znalazłem pod numerem w3schools, zakładając, że div ma zestaw height i/lub width.

Wszystko, czego potrzebujesz to height i width, aby wykluczyć wypełnienie.

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

You downvoters: ta odpowiedź pomogła co najmniej 5 osób, sądząc po upvotes Dostałem. Jeśli ci się nie podoba, powiedz mi, dlaczego mogę to naprawić. To moja największa obsesja na punkcie zwierząt z pochlebstwami; rzadko mi mówisz, dlaczego to robisz.

Answer 5

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

Jsfiddle

Answer 6

Inną opcją jest użycie funkcji getBoundingClientRect. Należy pamiętać, że getBoundingClientRect zwróci pusty rect, jeśli wskazaniem elementu jest "none".

Przykład:

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