webentwicklung-frage-antwort-db.com.de

Holen Sie sich div Höhe mit einfachem JavaScript

Irgendwelche Ideen, wie man die Größe eines Divs erhält, ohne jQuery zu verwenden?

Ich habe Stack Overflow nach dieser Frage durchsucht und es scheint, als ob jede Antwort auf jQueries .height() verweist.

Ich habe so etwas wie myDiv.style.height ausprobiert, aber es hat nichts zurückgegeben, selbst wenn mein div seine width und height in CSS gesetzt hatte.

javascripthtmlcss
275
lwiii
var clientHeight = document.getElementById('myDiv').clientHeight;

oder

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

clientHeight enthält Polsterung.

offsetHeight enthält Auffüllen, Bildlaufleiste und Rahmen.

517
Dan

jsFiddle

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

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);  
}
14
user4617883
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 Rahmen und die Bildlaufleiste. Je nach Situation können Sie den einen oder anderen verwenden.

Hoffe das hilft.

10
Keo Strife

Die anderen Antworten haben bei mir nicht funktioniert. Folgendes habe ich bei w3schools gefunden, vorausgesetzt, das div hat ein height und/oder width gesetzt.

Alles, was Sie brauchen, ist height und width, um die Polsterung auszuschließen.

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

Ihr Downvoter: Diese Antwort hat mindestens 5 Leuten 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 Pet Peeve mit Downvotes. du sagst mir selten, warum du es abgelehnt hast.

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

Jsfiddle

1
user3556121

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

    }
1
Pedro Coelho

Zusätzlich zu el.clientHeight und el.offsetHeight, wenn Sie die Höhe des Inhalts innerhalb des Elements benötigen (unabhängig von der eingestellten Höhe) auf dem Element selbst) können Sie el.scrollHeight verwenden. 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 festlegen möchten. Zum Beispiel:

var el = document.getElementById('myDiv')

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

versuchen

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>
0
Kamil Kiełczewski