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

312

Wszelkie pomysły na uzyskanie wysokości div bez korzystania z jQuery?

Szukałem przepełnienia stosu dla tego pytania i wydaje się, że każda odpowiedź wskazuje na odpowiedź jQuery .height().

Próbowałem czegoś takiego myDiv.style.height, ale nic nie zwróciło, nawet gdy moja div miała widthi heightustawiła w CSS.

lwiii
źródło

Odpowiedzi:

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

lub

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

clientHeight obejmuje wyściółkę.

offsetHeight zawiera padding, scrollBar i obramowania.

Dan
źródło
2
offsetheight robi wokr na IE10 poniżej quirksmode.org/mobile/tableViewport_desktop.html
fearis
3
Można również użyć, scrollHeightktóra obejmuje wysokość zawartego dokumentu, pionowe wypełnienie i pionowe obramowania.
Saeid Zebardast,
5
clientHeightzawiera również wypełnienie, więc nie jest to odpowiednik$.height()
Eevee
2
granice i margines również zajmują miejsce. :) a twoja odpowiedź sugeruje, clientHeightże nie obejmuje wypełnienia. a pytanie wspomina oba, $.height()a .style.heightżadne z nich nie obejmuje obicia, sugerując, że pytający też tego nie chce.
Eevee,
3
Uwaga: OP nie poprosił o odpowiedzi, które wykluczały wypełnianie . Nie ma natywnego rozwiązania dla wielu platform dla tego, o czym jestem świadomy.
Dan
23

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
Daniel Imms
źródło
22

Inną opcją jest użycie funkcji getBoundingClientRect. Należy pamiętać, że getBoundingClientRect zwróci pusty prostokąt, jeśli wyświetlany element ma wartość „none”.

Przykład:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}
użytkownik4617883
źródło
2
Myślę, że to lepsze rozwiązanie
Intervalia,
11
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight i clientWidth są tym, czego szukasz.

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

Mam nadzieję że to pomoże.

Keo Strife
źródło
2

Inne odpowiedzi nie działały dla mnie. Oto, co znalazłem w w3schools , zakładając, że divma a heighti / lub widthzestaw.

Wszystko czego potrzebujesz to heighti widthaby wykluczyć wypełnienie.

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

Wy downvoters: Ta odpowiedź pomogła co najmniej 5 osobom, sądząc po pozytywnych opiniach, które otrzymałem. Jeśli ci się nie podoba, powiedz mi, dlaczego mogę to naprawić. To mój największy wkurzający zwierzak z pochlebnymi opiniami; rzadko mi mówisz, dlaczego głosujesz za tym.

wyciągnięty
źródło
23
To nie zadziała, chyba że div ma set heighti / lubwidth
hopkins-matt
1
Myślałem, że zostało to założone i dorozumiane. Czy chciałbyś, aby to zastrzeżenie wspomniane w mojej odpowiedzi?
ściągnął
2
To jest lepsze. Osobiście nie uważałbym innych metod za niedokładne. Zaryzykowałbym stwierdzenie, że mam zastosowanie offsetHeighti clientHeightczęściej niż style.height.
hopkins-matt
1
Nie pracowali dla mnie. Dlatego opublikowałem tę odpowiedź.
wyciągnął
1
Nie widzę, jak w3schools twierdzi, że inne metody nie są dokładne.
aknuds1
1
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

użytkownik3556121
źródło
1

Oprócz el.clientHeighti el.offsetHeight, gdy potrzebujesz wysokości zawartości wewnątrz elementu (niezależnie od wysokości ustawionej na samym elemencie), możesz użyć el.scrollHeight. więcej informacji

Może to być przydatne, jeśli chcesz ustawić wysokość elementu lub maksymalną wysokość na dokładną wysokość jego wewnętrznej zawartości dynamicznej. Na przykład:

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'
Cronoklee
źródło
Dla każdego, kto się zastanawia, jest to bardzo przydatne do wykonywania przejść CSS dla
list
1

próbować

myDiv.offsetHeight 

Kamil Kiełczewski
źródło
1

Oto jeszcze jedna alternatywa:

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

    }
Pedro Coelho
źródło
1

Jedną z opcji byłoby

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
SHIVANSH NARAYAN
źródło