See ajaveeb demonstreerib DOM-i elemendi kasutamist kliendi kõrgus HTML-is.
Kuidas kasutada DOM-i elementi “clientHeight” HTML-is?
' kliendi kõrgus ” atribuut võimaldab arendajatel arvutada elemendi nähtava sisu kõrgust. See aitab paigutada elemente üksteise suhtes või määrata, kas kasutaja on kerinud keritava konteineri paremasse serva. Samuti annab see teavet veebilehel allesjäänud kasutamata ruumi kohta.
Näide
Vaatame läbi näite, et atribuuti „clientHeight” paremini demonstreerida. Näiteks ' onclick ' sündmusekuulajat kasutatakse '' pakutava tulemuse kuvamiseks kliendi kõrgus ” vara:
< keha >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' onclick = 'showelementHeight()' >
Kõrguse kuvamiseks klõpsake Linuxhinti artiklil!
< / h2 >
< stsenaarium >
function showelementHeight() {
var näide = document.getElementById('element');
var elementKõrgus= example.clientHeight;
alert('Kõrgus on: ' + elementKõrgus + ' pikslit.');
}
< / stsenaarium > >
< / keha >
Ülaltoodud koodilõigu selgitust kirjeldatakse allpool:
- Esialgu looge ' ' silt '' sees
” sildi ja lisage sellele mõned näivandmed. Samuti määrake 'ID' element ” valitud HTML-elemendile. - Järgmisena lisage ' onclick() 'sündmuskuulaja, mis kutsub esile näitaelemendi kõrgus() funktsioon, kui kasutaja klõpsab nupul ” element.
- Seejärel sees ' näitaelemendi kõrgus() funktsioon loob muutuja nimega ' näiteks ', mis toimib HTML-i elemendi eksemplarina, mille ID on ' element ”.
- Järgmisena looge teine muutuja nimega ' element Kõrgus “, mis salvestab atribuudi „clientHeight” tulemuse.
- Pärast seda kuvage ' element Kõrgus '' muutuja hoiatuskastis, kasutades ' hoiatus () ” meetod.
Lõpuks lisage järgmised CSS-i atribuudid, et kujundada ' h2 ” element:
< stiilis >
#element {
veeris: 20 pikslit;
polster: 10px;
taust- värvi : tumetsüaan;
kõrgus : 300 pikslit;
tekst- joondada : Keskus;
rida- kõrgus : 100 pikslit;
}
< / stiilis >
Ülaltoodud koodilõigul on järgmised CSS-i atribuudid määratud div-ile, mille ID on ' element ”:
- ' 20 pikslit ”, „ 10 pikslit ” ja „ tumetsüaan ' väärtused antakse CSS-ile ' marginaal ”, „ polsterdus ” ja „ taustavärv ” omadused.
- Kasutab ka ' kõrgus ”, „ teksti joondamine ” ja „ reakõrgus ” CSS-i atribuudid kasutaja nähtavuse parandamiseks.
Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja selline:
Väljund näitab, et valitud elemendi kõrgus kuvatakse hoiatuskastis alati, kui kasutaja elemendil klõpsab.
Järeldus
Et kasutada ' kliendi kõrgus ” atribuudile HTML-is, valige HTML-element, avades atribuudi id. Pärast seda lisage atribuut 'clientHeight' ja kuvage tulemus. See on kirjutuskaitstud omadus ja tagastab tulemuse pikslites. Atribuut „clientHeight” töötab märgendi „