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

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.

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

lub

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

clientHeight obejmuje wyściółkę.

offsetHeight zawiera padding, scrollBar i obramowania.

jsFiddle

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

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

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.

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.

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

Jsfiddle

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'

próbować

myDiv.offsetHeight 

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

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

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

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

    }

Jedną z opcji byłoby

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