Tento článok demonštruje prvok DOM „clientTop“ spolu s praktickou implementáciou v HTML.
Ako používať prvok DOM „clientTop“ v HTML?
Vlastnosť „clientTop“ je užitočná na prácu s rozložením a umiestnením prvkov HTML pri vytváraní webových stránok. Čo na oplátku pomáha pri vytváraní responzívnych a dynamických rozložení webových stránok
Príklad
Uveďme príklad pre lepšie pochopenie vlastnosti „clientTop“. V tomto príklade sa napríklad vyhodnotí váha okraja z hornej pozície:
< telo >
< h3 id = 'príklad' > Článok poskytuje Linuxhint pre lepšie vysvetlenie < / h3 >
< / telo >
Najprv vo vnútri „ ” tag vytvoriť “ ” a poskytnite mu nejaké fiktívne údaje. Tiež priraďte id „ príklad ' s tým.
< štýl >
#príklad {
hranica : 2px plná čierna;
výplň: 10px;
pozadie- farba : svetlo sivá;
}
< / štýl >
Potom vo vnútri „ ” tag vyberte “ príklad “id a nastavte hodnotu “ 2px pevná lesná zeleň “ na “ hranica ' nehnuteľnosť. Tiež použite základný štýl pomocou „ vypchávka “ a „ farba pozadia ” vlastnosti na účely lepšej vizualizácie.
Po vykonaní vyššie uvedeného kódu sa webová stránka zobrazí takto:
Výstup zobrazuje, že prvky div a h3 sú zobrazené na webovej stránke so základným štýlom.
Použite vlastnosť „clientTop“.
Ak chcete použiť „ clientTop ” na prvok HTML, pridajte nasledujúce riadky kódu do „ ” tag. Vysvetlenie tohto útržku kódu je vysvetlené nižšie:
< skript >bol príkladom = document.getElementById ( 'príklad' ) ;
var topHeight = example.clientTop;
konzola.log ( 'Horná výška okraja:' + topHeight + 'px' ) ;
< / skript >
Vo vyššie uvedenom útržku kódu:
- Po prvé, premenná „ príklad ” je vytvorený, ktorý ukladá informácie alebo aplikuje niektoré akcie na prvok HTML.
- Ďalej, „ topHeight premenná „ukladá“ príklad premenná spolu s premennou „ clientTop ' nehnuteľnosť.
- Na konci zobrazte „ topHeight ” premenná na konzole pomocou “ console.log() “.
Po vykonaní vyššie uvedeného útržku kódu sa konzola zobrazí takto:
Vyššie uvedený výstup ilustruje, že výška/hmotnosť horného okraja je zobrazená na konzole v pixeloch pre vybraté prvky.
Záver
' clientTop ” meria celkovú výšku prvkov HTML vrátane ich okrajov a výplne. Vlastnosť „clientTop“ vracia váhu okraja z hornej pozície pre vybraný prvok HTML, čo pomáha pri vytváraní interaktívnych webových stránok. Tento článok ukázal, čo znamená prvok DOM „clientTop“ v HTML.