Ipinapakita ng blog na ito ang paggamit ng elemento ng DOM clientHeight sa HTML.
Paano Gamitin ang DOM Element na 'clientHeight' sa HTML?
Ang ' clientHeight ” Ang property ay nagbibigay-daan sa mga developer na kalkulahin ang taas ng nakikitang content ng isang elemento. Nakakatulong ito sa pagpoposisyon ng mga elemento na nauugnay sa isa't isa o pagtukoy kung ang isang user ay nag-scroll sa kanang gilid ng isang na-scroll na lalagyan. Nagbibigay din ito ng impormasyon tungkol sa natitirang hindi nagamit na espasyo sa webpage.
Halimbawa
Maglakad tayo sa isang halimbawa para sa isang mas mahusay na pagpapakita ng property na 'clientHeight'. Halimbawa, ang ' onclick 'Ang tagapakinig ng kaganapan ay ginagamit upang ipakita ang resulta na ibinigay ng ' clientHeight ” ari-arian:
< katawan >
< h2 id = 'elemento' >< / h2 >
< h2 id = 'elemento' onclick = 'showelementHeight()' >
I-click ang Linuxhint Article para ipakita ang Taas!
< / h2 >
< iskrip >
function showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Ang Taas ay: ' + elementHeight + ' pixels.');
}
< / iskrip > >
< / katawan >
Ang paliwanag ng snippet ng code sa itaas ay inilarawan sa ibaba:
- Sa simula, lumikha ng ' 'tag sa loob ng '
” tag at magbigay ng ilang dummy data dito. Gayundin, magtalaga ng id ng ' elemento ” sa napiling elemento ng HTML. - Susunod, magdagdag ng ' onclick() ” tagapakinig ng kaganapan na humihiling ng “ showelementHeight() ” function kapag nag-click ang user sa “ ' elemento.
- Pagkatapos, sa loob ng ' showelementHeight() Ang function na ” ay lumilikha ng variable na pinangalanang “ halimbawa ” na nagsisilbing instance para sa HTML element na may id ng “ elemento ”.
- Susunod, lumikha ng isa pang variable na pinangalanang ' elementHeight '' na nag-iimbak ng resultang ibinigay ng property na 'clientHeight'.
- Pagkatapos nito, ipakita ang ' elementHeight '' variable sa alert box gamit ang ' alert() ” paraan.
Sa huli, idagdag ang mga sumusunod na katangian ng CSS para sa pag-istilo ng “ h2 ' elemento:
< istilo >
#elemento {
margin: 20px;
padding: 10px;
background- kulay : darkcyan;
taas : 300px;
text- ihanay : gitna;
linya- taas : 100px;
}
< / istilo >
Sa snippet ng code sa itaas, ang mga sumusunod na katangian ng CSS ay itinalaga sa div na mayroong id na ' elemento ”:
- Ang ' 20px ”, “ 10px 'at' darkcyan Ang mga halaga ay ibinibigay sa CSS margin ”, “ padding 'at' kulay ng background ” properties, ayon sa pagkakabanggit.
- Gumagamit din ng ' taas ”, “ text-align 'at' taas ng linya ” Mga katangian ng CSS upang mapahusay ang visibility ng user.
Pagkatapos ng execution ng snippet ng code sa itaas, lalabas ang webpage nang ganito:
Ipinapakita ng output na ang taas ng napiling elemento ay ipinapakita sa kahon ng alerto, sa tuwing magki-click ang user sa elemento.
Konklusyon
Upang magamit ang ' clientHeight ” property sa HTML, piliin ang HTML element sa pamamagitan ng pag-access sa id attribute. Pagkatapos nito, ilakip ang property na 'clientHeight' at ipakita ang resulta. Isa itong read-only na property at ibinabalik ang resulta sa mga pixel. Gumagana ang property na “clientHeight” sa loob ng tag na “