Höhe des div mit einfachem JavaScript abrufen

Question

Ideen dazu, wie man die Höhe eines divs ohne jQuery bekommt?

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

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

Answer 1

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

oder

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

clientHeight enthält das Padding.

offsetHeight enthält das Padding, die Scrollbar und die Ränder.

Answer 2

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

Beispiel:

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

UPDATE: Hier ist derselbe Code, der im Jahr 2020 geschrieben wurde:

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}

Answer 3

jsFiddle

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

Translated to German:

jsFiddle

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

Answer 4

1. HTMLElement.style - gibt den definierten Style des Elements zurück
2. clientHeight - Höhe + Padding
3. offsetHeight - Höhe + Padding + Rahmen
4. scrollHeight - gibt Höhe + Padding zurück
5. getBoundingClientRect() - gibt die Eigenschaften left, top, right, bottom, x, y, width und height zurück

6. getComputedStyle() - gibt alle CSS-Eigenschaften eines Elements zurück

   // gibt den definierten Style des Elements zurück const styleHeight = document.getElementById('myDiv').style.height; console.log('Style-Höhe: ', styleHeight);

   // Höhe + Padding const clientHeight = document.getElementById('myDiv').clientHeight; console.log('Client-Höhe: ', clientHeight);

   // Höhe + Padding + Rahmen const offsetHeight = document.getElementById('myDiv').offsetHeight; console.log('Offset-Höhe: ', offsetHeight);

   // Höhe + Padding const scrollHeight = document.getElementById('myDiv').scrollHeight; console.log('Scroll-Höhe: ', scrollHeight);

   // gibt left, top, right, bottom, x, y, width und height zurück const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height; console.log('Höhe von getBoundingClientRect(): ', getBoundingClientRectHeight);

   // gibt alle CSS-Eigenschaften eines Elements zurück const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height; console.log('Höhe des Style-Elements: ', styleElementHeight);

Answer 5

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

clientHeight und clientWidth sind das, was du suchst.

offsetHeight und offsetWidth geben ebenfalls die Höhe und Breite zurück, aber sie beinhalten auch den Rand und den Bildlaufbalken. Je nach Situation kannst du das eine oder das andere verwenden.

Ich hoffe, das hilft.