See artikkel demonstreerib DOM-i elementi “clientTop” koos praktilise rakendamisega HTML-is.
Kuidas kasutada HTML-is DOM-elementi “clientTop”?
Atribuut “clientTop” on kasulik HTML-i elementide paigutuse ja positsioneerimisega töötamiseks veebilehtede loomise ajal. Mis vastutasuks aitab luua tundliku ja dünaamilise veebisaidi paigutust
Näide
Toome näite atribuudi „clientTop” paremaks mõistmiseks. Näiteks äärise kaalu ülemisest positsioonist hinnatakse selles näites:
< keha >
< h3 id = 'näide' > Parema selgituse saamiseks pakub artikkel Linuxhintilt < / h3 >
< / keha >
Esiteks, sees
< stiilis >
#näide {
piir : 2px täismust;
polster: 10px;
taust- värvi : helehall;
}
< / stiilis >
Pärast seda, sees '
Pärast ülaltoodud koodi täitmist näeb veebileht välja selline:
Väljund näitab, et elemente div ja h3 kuvatakse veebilehel põhistiiliga.
Kasutage atribuuti „clientTop”.
Et kasutada ' klientTop ' atribuut HTML-elemendile, lisage järgmised koodiread ' ” silti. Selle koodilõigu selgitust selgitatakse allpool:
< stsenaarium >oli eeskujuks = document.getElementById ( 'näide' ) ;
var topKõrgus = example.clientTop;
console.log ( 'Ülemise piiri kõrgus:' + topHeight + 'px' ) ;
< / stsenaarium >
Ülaltoodud koodilõigul:
- Esiteks muutuja ' näiteks ”, mis salvestab teavet või rakendab HTML-elemendile mõningaid toiminguid.
- Järgmiseks ' topKõrgus ' muutuja salvestab ' näiteks muutuja ' koos '' klientTop ” vara.
- Lõpuks kuvage ' topKõrgus ' muutuja konsoolil kasutades ' console.log() ” meetod.
Pärast ülaltoodud koodilõigu täitmist näeb konsool välja selline:
Ülaltoodud väljund illustreerib, et valitud elementide ülemise äärise kõrgus/kaal kuvatakse konsoolil pikslites.
Järeldus
' klientTop ” atribuut mõõdab HTML-i elementide kogukõrgust, sealhulgas nende ääriseid ja polsterdust. Atribuut “clientTop” tagastab valitud HTML-elemendi ülemisest positsioonist äärise kaalu, mis aitab luua interaktiivseid veebilehti. See artikkel on näidanud, mida DOM-i element „clientTop” HTML-is tähendab.