Denne bloggen demonstrerer bruken av DOM-elementet klienthøyde i HTML.
Hvordan bruke DOM Element 'clientHeight' i HTML?
« klienthøyde ”-egenskapen lar utviklere beregne høyden på et elements synlige innhold. Det hjelper med å plassere elementer i forhold til hverandre eller avgjøre om en bruker har rullet til høyre kant av en rullbar beholder. Den gir også informasjon om gjenværende ubrukt plass på nettsiden.
Eksempel
La oss gå gjennom et eksempel for en bedre demonstrasjon av 'clientHeight'-egenskapen. For eksempel, ' ved trykk ' hendelseslytter brukes til å vise resultatet levert av ' klienthøyde ' eiendom:
< kropp >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' ved trykk = 'showelementHeight()' >
Klikk på Linuxhint-artikkel for å vise høyde!
< / h2 >
< manus >
funksjon showelementHeight() {
var eksempel = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Høyden er: ' + elementHeight + ' piksler.');
}
< / manus > >
< / kropp >
Forklaringen av kodebiten ovenfor er beskrevet nedenfor:
- Opprett først en ' ' tag inne i ' ” tag og gi den noen dummydata. Tilordne også en ID av ' element ' til det valgte HTML-elementet.
- Deretter legger du til en ' ved trykk() ' hendelseslytter som påkaller ' showelementHeight() '-funksjonen når brukeren klikker på ' ' element.
- Deretter, inne i ' showelementHeight() '-funksjonen lager en variabel kalt ' eksempel ' som fungerer som en forekomst for HTML-elementet som har en ID på ' element '.
- Deretter oppretter du en annen variabel kalt ' elementHøyde '' som lagrer resultatet levert av 'clientHeight'-egenskapen.
- Etter det, vis ' elementHøyde '' variabel på varslingsboksen ved å bruke ' varsling() 'metoden.
Til slutt, legg til følgende CSS-egenskaper for styling av ' h2 ' element:
< stil >
#element {
margin: 20px;
polstring: 10px;
bakgrunn- farge : mørkblått;
høyde : 300px;
tekst- tilpasse : senter;
linje- høyde : 100px;
}
< / stil >
I kodebiten ovenfor er følgende CSS-egenskaper tilordnet til div-en som har en ID på ' element ':
- « 20 piksler ', ' 10 piksler ' og ' mørkblått 'verdier er gitt til CSS' margin ', ' polstring ' og ' bakgrunnsfarge ” eiendommer, henholdsvis.
- Bruker også ' høyde ', ' tekstjustering ' og ' linjehøyde CSS-egenskaper for å forbedre brukerens synlighet.
Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut:
Utdataene viser at høyden på det valgte elementet vises i varslingsboksen hver gang brukeren klikker på elementet.
Konklusjon
For å bruke ' klienthøyde ” egenskap i HTML, velg HTML-elementet ved å gå til id-attributtet. Deretter legger du ved 'clientHeight'-egenskapen og viser resultatet. Det er en skrivebeskyttet egenskap og returnerer resultatet i piksler. «clientHeight»-egenskapen fungerer inne i «