Ovaj blog demonstrira korištenje DOM elementa clientHeight u HTML-u.
Kako koristiti DOM element “clientHeight” u HTML-u?
' clientHeight ” svojstvo omogućuje programerima da izračunaju visinu vidljivog sadržaja elementa. Pomaže u pozicioniranju elemenata jedan u odnosu na drugi ili određivanju je li se korisnik pomaknuo do desnog ruba spremnika koji se može pomicati. Također pruža informacije o preostalom neiskorištenom prostoru na web stranici.
Primjer
Prođimo kroz primjer za bolju demonstraciju svojstva 'clientHeight'. Na primjer, ' na klik ” slušatelj događaja koristi se za prikaz rezultata koje daje “ clientHeight ” svojstvo:
< tijelo >
< h2 iskaznica = 'element' >< / h2 >
< h2 iskaznica = 'element' na klik = 'showelementHeight()' >
Kliknite Linuxhint članak za prikaz visine!
< / h2 >
< skripta >
funkcija showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Visina je: ' + elementHeight + ' piksela.');
}
< / skripta > >
< / tijelo >
Objašnjenje gornjeg isječka koda opisano je u nastavku:
- U početku stvorite ' ” unutar oznake „
” i navedite neke lažne podatke. Također, dodijelite ID ' element ” na odabrani HTML element. - Zatim dodajte ' na klik() ' slušatelj događaja koji poziva ' PrikažielementHeight() ' kada korisnik klikne na ' ” element.
- Zatim, unutar ' PrikažielementHeight() ' funkcija stvara varijablu pod nazivom ' primjer ' koji djeluje kao instanca za HTML element koji ima ID ' element ”.
- Zatim stvorite drugu varijablu pod nazivom ' elementHeight '' koji pohranjuje rezultat koji daje svojstvo 'clientHeight'.
- Nakon toga, prikažite ' elementHeight ’’ varijabla u okviru upozorenja pomoću „ upozorenje() ” metoda.
Na kraju dodajte sljedeća CSS svojstva za stiliziranje ' h2 ” element:
< stil >
#element {
margina: 20px;
ispuna: 10px;
pozadina- boja : tamnocijan;
visina : 300 px;
tekst- uskladiti : centar;
crta- visina : 100 px;
}
< / stil >
U gornjem isječku koda, sljedeća CSS svojstva dodijeljena su divu koji ima ID ' element ”:
- ' 20 px ”, “ 10 px ' i ' tamnocijan ' vrijednosti se dostavljaju CSS-u ' margina ”, “ podstava ' i ' boja pozadine ” svojstva, respektivno.
- Također koristi ' visina ”, “ poravnanje teksta ' i ' linija-visina ” CSS svojstva za poboljšanje vidljivosti korisnika.
Nakon izvršenja gornjeg isječka koda, web stranica izgleda ovako:
Izlaz pokazuje da je visina odabranog elementa prikazana u okviru upozorenja, kad god korisnik klikne na element.
Zaključak
Za korištenje ' clientHeight ” svojstvo u HTML-u, odaberite HTML element pristupom atributu id. Nakon toga priložite svojstvo “clientHeight” i prikažite rezultat. To je svojstvo samo za čitanje i vraća rezultat u pikselima. Svojstvo “clientHeight” radi unutar oznake “