Ta članek prikazuje element DOM »clientTop« skupaj s praktično implementacijo v HTML.
Kako uporabiti element DOM »clientTop« v HTML?
Lastnost »clientTop« je uporabna za delo s postavitvijo in pozicioniranjem elementov HTML med ustvarjanjem spletnih strani. Kar v zameno pomaga pri ustvarjanju odzivnih in dinamičnih postavitev spletnih strani
Primer
Poglejmo si primer za boljše razumevanje lastnosti »clientTop«. V tem primeru je na primer ovrednotena teža obrobe z zgornjega položaja:
< telo >
< h3 id = 'primer' > Članek je zagotovil Linuxhint za boljšo razlago < / h3 >
< / telo >
Najprej znotraj '
< stil >
#primer {
meja : 2 slikovnih pik polna črna;
oblazinjenje: 10px;
ozadje- barva : svetlosiva;
}
< / stil >
Po tem znotraj '
Po izvedbi zgoraj navedene kode se spletna stran prikaže takole:
Izhod pokaže, da sta elementa div in h3 prikazana na spletni strani z osnovnim slogom.
Uporabite lastnost »clientTop«.
Če želite uporabiti ' clientTop ' v elementu HTML, dodajte naslednje vrstice kode znotraj '
je bil primer = document.getElementById ( 'primer' ) ;
var topHeight = example.clientTop;
console.log ( 'Višina zgornje obrobe:' + topHeight + 'px' ) ;
< / scenarij >
V zgornjem delčku kode:
- Prvič, spremenljivka ' primer ” se ustvari, ki shranjuje informacije ali izvaja nekatera dejanja za element HTML.
- Nato je ' topHeight ' spremenljivka shrani ' primer ' skupaj s spremenljivko ' clientTop ” lastnina.
- Na koncu prikažite ' topHeight ' na konzoli z uporabo ' console.log() ” metoda.
Po izvedbi zgornjega delčka kode se konzola prikaže takole:
Zgornji izhod ponazarja, da je višina/teža zgornje meje prikazana na konzoli v slikovnih pikah za izbrane elemente.
Zaključek
' clientTop ” meri skupno višino elementov HTML, vključno z njihovimi obrobami in oblazinjenjem. Lastnost »clientTop« vrne težo obrobe z zgornjega položaja za izbrani element HTML, kar pomaga pri izdelavi interaktivnih spletnih strani. Ta članek je pokazal, kaj pomeni element DOM »clientTop« v HTML.