Acest blog demonstrează utilizarea elementului DOM Înălțimea clientului în HTML.
Cum se utilizează elementul DOM „clientHeight” în HTML?
„ Înălțimea clientului ” proprietatea permite dezvoltatorilor să calculeze înălțimea conținutului vizibil al unui element. Ajută la poziționarea elementelor unul față de celălalt sau la determinarea dacă un utilizator a derulat la marginea dreaptă a unui container derulabil. De asemenea, oferă informații despre spațiul neutilizat rămas pe pagina web.
Exemplu
Să parcurgem un exemplu pentru o mai bună demonstrație a proprietății „clientHeight”. De exemplu, „ onclick ” ascultătorul de evenimente este utilizat pentru a afișa rezultatul furnizat de „ Înălțimea clientului ” proprietate:
< corp >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' onclick = „showelementHeight()” >
Faceți clic pe Articolul Linuxhint pentru a afișa înălțimea!
< / h2 >
< scenariu >
funcția showelementHeight() {
exemplu var = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Înălțimea este: ' + elementHeight + ' pixeli.');
}
< / scenariu > >
< / corp >
Explicația fragmentului de cod de mai sus este descrisă mai jos:
- Inițial, creați un „ eticheta ” în interiorul ”
” etichetați și furnizați-i câteva date false. De asemenea, atribuiți un id de „ element ” la elementul HTML selectat. - Apoi, adăugați un „ onclick() ” ascultător de evenimente care invocă „ showelementHeight() ” când utilizatorul face clic pe “ ' element.
- Apoi, în interiorul „ showelementHeight() funcția ” creează o variabilă numită ” exemplu ” care acționează ca o instanță pentru elementul HTML care are un id de „ element ”.
- Apoi, creați o altă variabilă numită „ elementHeight ’’ care stochează rezultatul furnizat de proprietatea „clientHeight”.
- După aceea, afișați „ elementHeight ’’ din caseta de alertă folosind „ alerta() ” metoda.
La final, adăugați următoarele proprietăți CSS pentru stilul „ h2 ' element:
< stil >
#element {
marja: 20px;
umplutură: 10px;
fundal- culoare : cyan închis;
înălţime : 300px;
text- alinia : centru;
linia- înălţime : 100px;
}
< / stil >
În fragmentul de cod de mai sus, următoarele proprietăți CSS sunt atribuite div-ului având un id de „ element ”:
- „ 20px ”, “ 10px ' și ' cyan închis „ valorile sunt furnizate CSS „ marginea ”, “ căptușeală ' și ' culoare de fundal ” proprietăți, respectiv.
- De asemenea, folosește „ înălţime ”, “ aliniere text ' și ' inaltimea liniei ” Proprietăți CSS pentru a îmbunătăți vizibilitatea utilizatorului.
După executarea fragmentului de cod de mai sus, pagina web apare astfel:
Ieșirea arată că înălțimea elementului selectat este afișată în caseta de alertă, ori de câte ori utilizatorul face clic pe element.
Concluzie
Pentru a utiliza „ Înălțimea clientului ” în HTML, selectați elementul HTML accesând atributul id. După aceea, atașați proprietatea „clientHeight” și afișați rezultatul. Este o proprietate numai pentru citire și returnează rezultatul în pixeli. Proprietatea „clientHeight” funcționează în interiorul etichetei „