Ovaj članak demonstrira DOM element “clientTop” zajedno s praktičnom implementacijom u HTML-u.
Kako koristiti DOM element “clientTop” u HTML-u?
Svojstvo “clientTop” korisno je za rad s izgledom i pozicioniranjem HTML elemenata tijekom izrade web stranica. Što zauzvrat pomaže u stvaranju responzivnih i dinamičnih izgleda web stranica
Primjer
Recimo primjer za bolje razumijevanje svojstva “clientTop”. Na primjer, težina obruba s gornje pozicije procjenjuje se u ovom primjeru:
< tijelo >
< h3 iskaznica = 'primjer' > Članak osigurao Linuxhint za bolje objašnjenje < / h3 >
< / tijelo >
Prvo, unutar '
< stil >
#primjer {
granica : 2 px puna crna;
ispuna: 10px;
pozadina- boja : svijetlo siva;
}
< / stil >
Nakon toga, unutar '
Nakon izvršavanja gore navedenog koda, web stranica izgleda ovako:
Izlaz prikazuje da su elementi div i h3 prikazani na web stranici s osnovnim stilom.
Koristite svojstvo “clientTop”.
Za korištenje ' clientTop ' na HTML elementu dodajte sljedeće retke koda unutar '
bio primjer = document.getElementById ( 'primjer' ) ;
var topHeight = primjer.vrh klijenta;
konzola.log ( 'Visina gornjeg ruba:' + gornja visina + 'px' ) ;
< / skripta >
U gornjem isječku koda:
- Prvo, varijabla ' primjer ” se stvara koji pohranjuje informacije ili primjenjuje neke radnje na HTML element.
- Zatim, ' gornja visina ' varijabla pohranjuje ' primjer varijablu zajedno s varijablom ' clientTop ” vlasništvo.
- Na kraju prikažite ' gornja visina ” na konzoli koristeći konzola.log() ” metoda.
Nakon izvršenja gornjeg isječka koda, konzola se pojavljuje ovako:
Gornji izlaz ilustrira da je visina/težina gornjeg ruba prikazana na konzoli u pikselima za odabrane elemente.
Zaključak
' clientTop ” mjeri ukupnu visinu HTML elemenata, uključujući njihove obrube i ispune. Svojstvo “clientTop” vraća težinu obruba s gornje pozicije za odabrani HTML element koji pomaže u izradi interaktivnih web stranica. Ovaj je članak pokazao što se podrazumijeva pod DOM elementom 'clientTop' u HTML-u.