Holen Sie sich div Höhe mit einfachem JavaScript

Irgendwelche Ideen, wie man die Größe eines Divs ohne jQuery ermitteln kann?

Ich habe Stack Overflow nach dieser Frage durchsucht und es scheint, dass jede Antwort auf jQuery's verweist .height().

Ich habe so etwas versucht myDiv.style.height, aber es hat nichts zurückgegeben, selbst wenn mein Div es hatte widthund heightin CSS eingestellt war.

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

oder

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

clientHeight beinhaltet Polsterung.

offsetHeight Enthält Polsterung, Bildlaufleiste und Rahmen.

jsFiddle

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

Eine weitere Option ist die Verwendung der Funktion getBoundingClientRect. Bitte beachten Sie, dass getBoundingClientRect ein leeres Rect zurückgibt, wenn die Anzeige des Elements 'none' ist.

Beispiel:

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 und clientWidth sind das, wonach Sie suchen.

offsetHeight und offsetWidth geben ebenfalls die Höhe und Breite zurück, enthalten jedoch den Rand und die Bildlaufleiste. Je nach Situation können Sie den einen oder anderen verwenden.

Hoffe das hilft.

Die anderen Antworten funktionierten nicht für mich. Folgendes habe ich bei w3schools gefunden , vorausgesetzt, das divhat ein heightund / oder ein widthSet.

Alles was Sie brauchen ist heightund widthPolsterung auszuschließen.

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

Ihr Downvoter: Diese Antwort hat mindestens 5 Personen geholfen, gemessen an den Upvotes, die ich erhalten habe. Wenn es dir nicht gefällt, sag mir warum, damit ich es reparieren kann. Das ist mein größter Ärger mit Abstimmungen. du sagst mir selten, warum du es ablehnst.

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

Jsfiddle

Zusätzlich zu el.clientHeightund el.offsetHeight, wenn Sie die Höhe des Inhalts innerhalb des Elements benötigen (unabhängig von der am Element selbst festgelegten Höhe), können Sie verwenden el.scrollHeight. Mehr Info

Dies kann nützlich sein, wenn Sie die Elementhöhe oder die maximale Höhe auf die exakte Höhe des internen dynamischen Inhalts einstellen möchten. Zum Beispiel:

var el = document.getElementById('myDiv')

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

Versuchen

myDiv.offsetHeight 

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

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

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

Hier ist noch eine Alternative:

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

    }

Eine Option wäre

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