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

Die anderen Antworten haben bei mir nicht funktioniert. Hier ist, was ich auf w3schools gefunden habe, vorausgesetzt das div hat eine festgelegte Höhe und/oder Breite.

Alles, was du brauchst, ist Höhe und Breite, um das Padding auszuschließen.

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

An diejenigen, die abgestimmt haben: Diese Antwort hat mindestens 5 Personen geholfen, was ich anhand der erhaltenen Upvotes sehe. Wenn es dir nicht gefällt, sag mir warum, damit ich es verbessern kann. Das ist mein größtes Ärgernis bei Abstimmungen; ihr sagt mir selten, warum ihr es ablehnt.

Answer 2

Zusätzlich zu el.clientHeight und el.offsetHeight, wenn Sie die Höhe des Inhalts innerhalb des Elements benötigen (unabhängig von der Höhe, die am Element selbst festgelegt ist), können Sie el.scrollHeight verwenden. mehr info

Dies kann nützlich sein, wenn Sie die Höhe des Elements oder die max-Höhe auf die genaue Höhe des internen dynamischen Inhalts festlegen möchten. Zum Beispiel:

var el = document.getElementById('myDiv')

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

Answer 3

Versuche

myDiv.offsetHeight 

console.log("Höhe:", myDiv.offsetHeight );

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

Answer 4

Der beste Weg ist -

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

var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width;
var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight  || (myDiv.getBoundingClientRect()).height;

console.log("Breite: "+ myDivWidth + "px");
console.log("Höhe: "+ myDivHeight + "px");

  Das ist "#myDiv" 
  Breite: 100% 
  Höhe: 256px

Answer 5

Hier ist eine weitere 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;
        }

    }