Dieser Blog demonstriert die Verwendung des DOM-Elements clientHöhe im HTML-Format.
Wie verwendet man das DOM-Element „clientHeight“ in HTML?
Der ' clientHöhe ”-Eigenschaft ermöglicht es Entwicklern, die Höhe des sichtbaren Inhalts eines Elements zu berechnen. Es hilft beim Positionieren von Elementen relativ zueinander oder beim Bestimmen, ob ein Benutzer zum rechten Rand eines scrollbaren Containers gescrollt hat. Es bietet auch Informationen über den verbleibenden ungenutzten Platz auf der Webseite.
Beispiel
Lassen Sie uns ein Beispiel durchgehen, um die Eigenschaft „clientHeight“ besser zu demonstrieren. Zum Beispiel das „ anklicken “ Ereignis-Listener wird verwendet, um das Ergebnis anzuzeigen, das vom „ clientHöhe ' Eigentum:
< Körper >
< h2 Ausweis = 'Element' >< / h2 >
< h2 Ausweis = 'Element' anklicken = 'showelementHeight()' >
Klicken Sie auf den Linuxhint-Artikel, um die Höhe anzuzeigen!
< / h2 >
< Skript >
Funktion showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Die Höhe ist: ' + elementHeight + ' Pixel.');
}
< / Skript > >
< / Körper >
Die Erklärung des obigen Code-Snippets ist unten beschrieben:
- Erstellen Sie zunächst ein „ ”-Tag innerhalb des “
”-Tag und stellen Sie ihm einige Dummy-Daten zur Verfügung. Weisen Sie außerdem eine ID von „ Element ” zum ausgewählten HTML-Element. - Als nächstes fügen Sie ein „ onclick() ” Ereignis-Listener, der das „ showelementHeight() “-Funktion, wenn der Benutzer auf die „ ' Element.
- Dann innerhalb des „ showelementHeight() ”-Funktion erstellt eine Variable mit dem Namen “ Beispiel “, das als Instanz für das HTML-Element mit der ID „ Element “.
- Erstellen Sie als Nächstes eine weitere Variable mit dem Namen „ elementHöhe ’’, die das von der Eigenschaft „clientHeight“ bereitgestellte Ergebnis speichert.
- Zeigen Sie danach „ elementHöhe ’’-Variable in der Alarmbox mit der “ Alarm() ' Methode.
Fügen Sie am Ende die folgenden CSS-Eigenschaften hinzu, um das „ h2 ' Element:
< Stil >
#Element {
Rand: 20px;
Polsterung: 10px;
Hintergrund- Farbe : dunkelcyan;
Höhe : 300px;
Text- ausrichten : Center;
Linie- Höhe : 100px;
}
< / Stil >
Im obigen Code-Snippet werden die folgenden CSS-Eigenschaften dem div mit einer ID von „ Element “:
- Der ' 20px “, „ 10px ' Und ' dunkelcyan „Werte werden dem CSS bereitgestellt“ Rand “, „ Polsterung ' Und ' Hintergrundfarbe ” Eigenschaften bzw.
- Verwendet auch „ Höhe “, „ Textausrichtung ' Und ' Zeilenhöhe ” CSS-Eigenschaften zur Verbesserung der Benutzersichtbarkeit.
Nach der Ausführung des obigen Codeschnipsels sieht die Webseite wie folgt aus:
Die Ausgabe zeigt, dass die Höhe des ausgewählten Elements im Warnfeld angezeigt wird, wenn der Benutzer auf das Element klickt.
Abschluss
Zur Nutzung des „ clientHöhe ”-Eigenschaft in HTML, wählen Sie das HTML-Element aus, indem Sie auf das id-Attribut zugreifen. Hängen Sie danach die Eigenschaft „clientHeight“ an und zeigen Sie das Ergebnis an. Es ist eine schreibgeschützte Eigenschaft und gibt das Ergebnis in Pixel zurück. Die Eigenschaft „clientHeight“ funktioniert innerhalb des Tags „