Ta blog prikazuje uporabo elementa DOM clientHeight v HTML.
Kako uporabiti element DOM “clientHeight” v HTML?
' clientHeight ” Lastnost omogoča razvijalcem, da izračunajo višino vidne vsebine elementa. Pomaga pri pozicioniranju elementov relativno drug glede na drugega ali pri ugotavljanju, ali se je uporabnik pomaknil na desni rob vsebnika, ki ga je mogoče premikati. Zagotavlja tudi informacije o preostalem neuporabljenem prostoru na spletni strani.
Primer
Oglejmo si primer za boljšo predstavitev lastnosti »clientHeight«. Na primer, ' onclick ' poslušalec dogodkov se uporablja za prikaz rezultata, ki ga zagotovi ' clientHeight ” Lastnost:
< telo >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' onclick = 'showelementHeight()' >
Kliknite članek Linuxhint za prikaz višine!
< / h2 >
< scenarij >
funkcija showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Višina je: ' + elementHeight + ' slikovnih pik.');
}
< / scenarij > >
< / telo >
Razlaga zgornjega delčka kode je opisana spodaj:
- Na začetku ustvarite » » oznaka znotraj »
” in ji vnesite nekaj navideznih podatkov. Dodelite tudi ID » element ” v izbrani element HTML. - Nato dodajte » onclick() ' poslušalec dogodkov, ki prikliče ' showelementHeight() «, ko uporabnik klikne na » ” element.
- Nato znotraj ' showelementHeight() ' funkcija ustvari spremenljivko z imenom ' primer «, ki deluje kot primerek za element HTML z ID-jem » element ”.
- Nato ustvarite drugo spremenljivko z imenom ' elementHeight «, ki shrani rezultat, ki ga zagotavlja lastnost »clientHeight«.
- Po tem prikažite » elementHeight « v opozorilnem polju z uporabo » opozorilo() ” metoda.
Na koncu dodajte naslednje lastnosti CSS za oblikovanje » h2 ” element:
< stil >
#element {
rob: 20px;
oblazinjenje: 10px;
ozadje- barva : temno cijan;
višina : 300 slikovnih pik;
besedilo- poravnati : center;
vrstica- višina : 100 slikovnih pik;
}
< / stil >
V zgornjem delčku kode so naslednje lastnosti CSS dodeljene divu z ID-jem ' element ”:
- ' 20 slikovnih pik ”, “ 10 slikovnih pik « in » temnocyan » vrednosti so posredovane CSS « marža ”, “ oblazinjenje « in » Barva ozadja ” lastnosti.
- Uporablja tudi ' višina ”, “ poravnava besedila « in » višina vrstice ” Lastnosti CSS za izboljšanje vidnosti uporabnikov.
Po izvedbi zgornjega delčka kode se spletna stran prikaže takole:
Izhod prikaže, da je višina izbranega elementa prikazana v polju z opozorilom, kadar koli uporabnik klikne element.
Zaključek
Za uporabo ' clientHeight ” v HTML, izberite element HTML z dostopom do atributa id. Po tem priložite lastnost »clientHeight« in prikažite rezultat. Je lastnost samo za branje in vrne rezultat v slikovnih pikah. Lastnost “clientHeight” deluje znotraj oznake “