Šajā rakstā ir parādīts DOM elements “clientTop” kopā ar praktisko ieviešanu HTML.
Kā HTML izmantot DOM elementu “clientTop”?
Rekvizīts “clientTop” ir noderīgs darbam ar HTML elementu izkārtojumu un izvietojumu, veidojot tīmekļa lapas. Tas savukārt palīdz izveidot atsaucīgus un dinamiskus vietņu izkārtojumus
Piemērs
Ļaujiet mums sniegt piemēru, lai labāk izprastu rekvizītu “clientTop”. Piemēram, apmales svars no augšējās pozīcijas tiek novērtēts šajā piemērā:
< ķermenis >
< h3 id = 'piemērs' > Rakstu nodrošina Linuxhint labākam skaidrojumam < / h3 >
< / ķermenis >
Pirmkārt, iekšpusē ' ' tagu izveidot ' ” tagu un sniedziet tam dažus fiktīvus datus. Piešķiriet arī ID ' piemērs ' ar to.
< stils >
#piemērs {
robeža : 2 pikseļi vienkrāsains melns;
polsterējums: 10 pikseļi;
fons- krāsa : gaiši pelēks;
}
< / stils >
Pēc tam iekšpusē '
Pēc iepriekš minētā koda izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka elementi div un h3 tiek parādīti tīmekļa lapā ar pamata stilu.
Izmantojiet rekvizītu “clientTop”.
Lai izmantotu ' klientsTop ” rekvizītu HTML elementā, pievienojiet šādas koda rindiņas
bija piemērs = document.getElementById ( 'piemērs' ) ;
var topAugstums = example.clientTop;
console.log ( Augšējās robežas augstums: + augšējaisAugstums + 'px' ) ;
< / skripts >
Iepriekš minētajā koda fragmentā:
- Pirmkārt, mainīgais ' piemērs tiek izveidots, kas saglabā informāciju vai piemēro dažas darbības HTML elementam.
- Tālāk “ topAugstums ' mainīgais saglabā ' piemērs ' mainīgais kopā ar ' klientsTop ” īpašums.
- Beigās parādiet ' topAugstums ' mainīgais konsolē, izmantojot ' console.log() ” metode.
Pēc iepriekš minētā koda fragmenta izpildes konsole izskatās šādi:
Iepriekš minētā izvade parāda, ka atlasīto elementu augšējās apmales augstums/svars tiek parādīts konsolē pikseļos.
Secinājums
' klientsTop ” rekvizīts mēra HTML elementu kopējo augstumu, ieskaitot to apmales un polsterējumu. Rekvizīts “clientTop” atgriež atlasītā HTML elementa apmales svaru no augšējās pozīcijas, kas palīdz veidot interaktīvas tīmekļa lapas. Šajā rakstā ir parādīts, ko HTML valodā nozīmē DOM elements “clientTop”.