Dieser Artikel demonstriert das DOM-Element „clientTop“ zusammen mit der praktischen Implementierung in HTML.
Wie verwendet man das DOM-Element „clientTop“ in HTML?
Die Eigenschaft „clientTop“ ist nützlich, um beim Erstellen von Webseiten mit dem Layout und der Positionierung der HTML-Elemente zu arbeiten. Was wiederum bei der Erstellung reaktionsschneller und dynamischer Website-Layouts hilft
Beispiel
Lassen Sie uns ein Beispiel zum besseren Verständnis der Eigenschaft „clientTop“ haben. Zum Beispiel wird in diesem Beispiel das Gewicht der Grenze von der obersten Position ausgewertet:
< Körper >
< h3 Ausweis = 'Beispiel' > Artikel von Linuxhint zur besseren Erklärung bereitgestellt < / h3 >
< / Körper >
Zunächst im „
< Stil >
#Beispiel {
Grenze : 2px durchgehend schwarz;
Polsterung: 10px;
Hintergrund- Farbe : hellgrau;
}
< / Stil >
Danach innerhalb des „
Nach der Ausführung des oben genannten Codes sieht die Webseite wie folgt aus:
Die Ausgabe zeigt, dass die div- und h3-Elemente auf der Webseite mit grundlegendem Stil angezeigt werden.
Verwenden Sie die Eigenschaft „clientTop“.
Um das „ ClientTop ”-Eigenschaft des HTML-Elements, fügen Sie die folgenden Codezeilen innerhalb der “
war Beispiel = document.getElementById ( 'Beispiel' ) ;
var topHeight = example.clientTop;
Konsole.log ( 'Obere Randhöhe: ' + topHöhe + 'px' ) ;
< / Skript >
Im obigen Code-Snippet:
- Zuerst die Variable „ Beispiel “ erstellt, das Informationen speichert oder einige Aktionen auf das HTML-Element anwendet.
- Als nächstes das „ topHöhe ” Variable speichert die “ Beispiel ” Variable zusammen mit der “ ClientTop ' Eigentum.
- Zeigen Sie am Ende das „ topHöhe ” Variable auf der Konsole mit der “ Konsole.log() ' Methode.
Nach der Ausführung des obigen Codeschnipsels sieht die Konsole so aus:
Die obige Ausgabe veranschaulicht, dass die Höhe/das Gewicht des oberen Rahmens für die ausgewählten Elemente auf der Konsole in Pixel angezeigt wird.
Abschluss
Der ' ClientTop ”-Eigenschaft misst die Gesamthöhe der HTML-Elemente, einschließlich ihrer Rahmen und Auffüllung. Die Eigenschaft „clientTop“ gibt die Rahmenstärke von der obersten Position für das ausgewählte HTML-Element zurück, was beim Erstellen interaktiver Webseiten hilft. Dieser Artikel hat gezeigt, was mit dem DOM-Element „clientTop“ in HTML gemeint ist.