Holen Sie sich die Höhe des Div-Elements in JavaScript
In HTML werden alle CSS-Eigenschaften, die Sie einem Element entweder mithilfe von CSS-Stylesheets oder mithilfe von JavaScript bereitstellen, im Document Object Model (DOM) festgelegt. Über dieses DOM können Sie später im JavaScript-Code problemlos auf diese Werte zugreifen. Es gibt verschiedene Möglichkeiten, die Werte der CSS-Eigenschaften in JavaScript abzurufen. In diesem Artikel erfahren Sie, wie Sie die CSS-Eigenschaft height aus unserem JavaScript-Code erhalten.
Unten ist das HTML-Dokument, das wir erstellt haben. Im Inneren haben wir ein body-Tag, das nur ein einzelnes div-Element mit der id von container enthält. Im head-Tag haben wir unserem div-Element einige grundlegende Stile wie Breite, Höhe, Rahmen, Auffüllung usw.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
Ausgabe:
Wenn Sie das obige HTML-Dokument ausführen, sehen Sie ein Rechteck wie dieses in Ihrem Browserfenster.
Nachdem wir nun alles eingerichtet haben, wenden wir verschiedene Eigenschaften auf dieses div-Element container an, um seine Höhe zu erhalten. Der Code, den wir schreiben werden, wird in die Tags <script></script> eingefügt, die sich im Tag body befinden.
Verschiedene Möglichkeiten, die Höhe der div-Elemente in JavaScript zu erhalten
Zuerst erhalten wir die Referenz des Elements container aus dem HTML-DOM mit der Methode getElementById(). Dann speichern wir dieses Element in der Variablen element in JavaScript.
let element = document.getElementById('container');
Da wir nun das div-Element haben, erhalten wir die Höhe des div mithilfe verschiedener Eigenschaften mit JavaScript.
1. clientHeight
Die clientHeight gibt die Höhe eines Elements inklusive des Paddings als Integer-Wert zurück.
console.log(element.clientHeight);
Ausgabe:
58
Da wir bei der Berechnung der Höhe, die derzeit bei 50px liegt, die Auffüllung von 4px an allen vier Seiten des Containers hinzugefügt haben, wird die Auffüllung von 4px oben und 4px unten, dh die Gesamtfüllung von 8px zur Höhe addiert werden. Daraus ergibt sich eine Gesamthöhe von 58px.
2. offsetHeight
Die offsetHeight besteht aus der Höhe des Elements, die auch alle Auffüllungen, Rahmen und horizontalen Bildlaufleisten (sofern vorhanden) enthält.
console.log(element.offsetHeight);
Ausgabe:
60
Ähnlich wie die Eigenschaft clientHeight nimmt die Eigenschaft offsetHeight auch 8px Padding an, die Höhe des Inhalts ist 50px und auch die Rahmenbreite ist 1px oben und 1px unten, also insgesamt 2px . Daher ist die von dieser Eigenschaft zurückgegebene Gesamthöhe 8 + 50 + 2, d. h. 60px.
3. scrollHeight
Die scrollHeight gibt die Höhe des Inhalts zurück, einschließlich der Inhalte, die aufgrund von Überlauf auf dem Bildschirm nicht sichtbar sind. Es enthält nur das Auffüllen des Elements, nicht jedoch den Rahmen, den Rand oder die horizontale Bildlaufleiste.
Die scrollHeight entspricht der clientHeight. Der einzige Unterschied zwischen clientHeight und scrollHeight besteht darin, dass die scrollheight auch die Höhe des Inhalts beinhalten kann, die derzeit wegen Überlauf auf dem Bildschirm nicht sichtbar ist.
console.log(element.scrollHeight);
Ausgabe:
58
Die Höhe des Inhalts beträgt 50px und der Gesamtabstand beträgt 8px. Daher ist die von der Eigenschaft scrollHeight zurückgegebene Gesamthöhe 58px.
4. getBoundingClientRect()
Die Methode getBoundingClientRect() gibt ein Objekt zurück, das Informationen über die Breite und Höhe des Elements sowie seine Position (x, y, oben, links usw.) relativ zum Ansichtsfenster enthält. Die mit dieser Methode berechnete Höhe enthält auch Auffüllung und Rahmen.
console.log(element.getBoundingClientRect().height);
Ausgabe:
60
Um also die Höhe des Elements aus dem von der Methode getBoundingClientRect() zurückgegebenen Objekt zu erhalten, müssen wir die Taste height verwenden, um die Höhe zu erhalten. Hier beträgt die Elementhöhe 50px, die Auffüllung 8px und die Rahmenbreite 2px. Also wird von dieser Funktion eine Gesamthöhe von 60px zurückgegeben.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn