Deze blog demonstreert het gebruik van het DOM-element cliëntHoogte in HTML.
Hoe DOM-element 'clientHeight' in HTML te gebruiken?
De ' cliëntHoogte ” Met de eigenschap kunnen ontwikkelaars de hoogte van de zichtbare inhoud van een element berekenen. Het helpt bij het positioneren van elementen ten opzichte van elkaar of het bepalen of een gebruiker naar de rechterrand van een schuifbare container is gescrolld. Het geeft ook informatie over de resterende ongebruikte ruimte op de webpagina.
Voorbeeld
Laten we een voorbeeld doornemen voor een betere demonstratie van de eigenschap 'clientHeight'. Bijvoorbeeld de ' bij klikken ”gebeurtenislistener wordt gebruikt om het resultaat weer te geven dat wordt geleverd door de “ cliëntHoogte ' eigendom:
< lichaam >
< h2 ID kaart = 'element' >< / h2 >
< h2 ID kaart = 'element' bij klikken = 'toonelementHoogte()' >
Klik op het Linuxhint-artikel om de hoogte weer te geven!
< / h2 >
< script >
functie showelementHeight() {
var voorbeeld = document.getElementById('element');
var elementHeight= voorbeeld.clientHeight;
alert('De hoogte is: ' + elementHeight + ' pixels.');
}
< / script > >
< / lichaam >
De uitleg van het bovenstaande codefragment wordt hieronder beschreven:
- Maak eerst een ' ” tag in de “
” tag en geef er wat dummy-gegevens aan. Wijs ook een id toe van ' element ” toe aan het geselecteerde HTML-element. - Voeg vervolgens een ' bij klikken() ”gebeurtenislistener die de “ toonelementHoogte() ” functie wanneer de gebruiker klikt op de “ ”-element.
- Dan, binnen de “ toonelementHoogte() ” functie maakt een variabele met de naam “ voorbeeld ” die fungeert als een instantie voor het HTML-element met een id van “ element ”.
- Maak vervolgens een andere variabele met de naam ' elementHoogte '' waarin het resultaat wordt opgeslagen dat wordt geleverd door de eigenschap 'clientHeight'.
- Geef daarna de ' elementHoogte '' variabele in het waarschuwingsvenster met behulp van de ' waarschuwing() ” methode.
Voeg uiteindelijk de volgende CSS-eigenschappen toe voor het stylen van de ' h2 ”-element:
< stijl >
#element {
marge: 20px;
opvulling: 10px;
achtergrond- kleur : donkercyaan;
hoogte : 300px;
tekst- uitlijnen : centrum;
lijn- hoogte : 100px;
}
< / stijl >
In het bovenstaande codefragment zijn de volgende CSS-eigenschappen toegewezen aan de div met een id van ' element ”:
- De ' 20px ”, “ 10px ' En ' donkercyaan ' waarden worden aan de CSS verstrekt ' marge ”, “ opvulling ' En ' Achtergrond kleur ” eigenschappen, respectievelijk.
- Maakt ook gebruik van “ hoogte ”, “ tekst uitlijnen ' En ' lijnhoogte ” CSS-eigenschappen om de zichtbaarheid van gebruikers te verbeteren.
Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit:
De uitvoer geeft aan dat de hoogte van het geselecteerde element wordt weergegeven in het waarschuwingsvenster, telkens wanneer de gebruiker op het element klikt.
Conclusie
Gebruik maken van de “ cliëntHoogte ”-eigenschap in HTML, selecteert u het HTML-element door naar het id-kenmerk te gaan. Voeg daarna de eigenschap 'clientHeight' toe en geef het resultaat weer. Het is een alleen-lezen eigenschap en retourneert het resultaat in pixels. De eigenschap 'clientHeight' werkt binnen de tag '