Denne blog demonstrerer brugen af DOM-elementet kundehøjde i HTML.
Hvordan bruger man DOM Element 'clientHeight' i HTML?
Det ' kundehøjde ” egenskab giver udviklere mulighed for at beregne højden af et elements synlige indhold. Det hjælper med at placere elementer i forhold til hinanden eller afgøre, om en bruger har rullet til højre kant af en rullebar beholder. Det giver også information om den resterende ubrugte plads på websiden.
Eksempel
Lad os gennemgå et eksempel for en bedre demonstration af egenskaben 'clientHeight'. For eksempel ' onclick ” hændelseslytter bruges til at vise resultatet leveret af ” kundehøjde ” ejendom:
< legeme >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' onclick = 'showelementHeight()' >
Klik på Linuxhint-artikel for at vise højde!
< / h2 >
< manuskript >
funktion showelementHeight() {
var eksempel = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Højden er: ' + elementHøjde + ' pixels.');
}
< / manuskript > >
< / legeme >
Forklaringen på ovenstående kodestykke er beskrevet nedenfor:
- Opret i første omgang en ' ' tag inde i ' ” tag og giv nogle dummy-data til det. Tildel også et id på ' element ” til det valgte HTML-element.
- Tilføj derefter en ' onclick() ' begivenhedslytter, der påkalder ' showelementHeight() '-funktion, når brugeren klikker på ' ' element.
- Derefter inde i ' showelementHeight() '-funktionen opretter en variabel med navnet ' eksempel ', der fungerer som en instans for HTML-elementet, der har et id på ' element ”.
- Opret derefter en anden variabel ved navn ' elementHøjde '', som gemmer resultatet leveret af egenskaben 'clientHeight'.
- Derefter skal du vise ' elementHøjde '' variabel på advarselsboksen ved hjælp af ' alert() ” metode.
Til sidst skal du tilføje følgende CSS-egenskaber til styling af ' h2 ' element:
< stil >
#element {
margin: 20px;
polstring: 10px;
baggrund- farve : mørkcyan;
højde : 300px;
tekst- justere : center;
linje- højde : 100px;
}
< / stil >
I ovenstående kodestykke tildeles følgende CSS-egenskaber til den div, der har et id på ' element ”:
- Det ' 20 px ', ' 10px ' og ' mørkcyan ' værdier leveres til CSS ' margen ', ' polstring ' og ' baggrundsfarve ” ejendomme, hhv.
- Bruger også ' højde ', ' tekstjustering ' og ' linjehøjde ” CSS-egenskaber for at forbedre brugerens synlighed.
Efter udførelsen af ovenstående kodestykke ser websiden sådan ud:
Outputtet viser, at højden af det valgte element vises i advarselsboksen, hver gang brugeren klikker på elementet.
Konklusion
For at bruge ' kundehøjde ” egenskab i HTML, skal du vælge HTML-elementet ved at få adgang til id-attributten. Derefter skal du vedhæfte egenskaben 'clientHeight' og vise resultatet. Det er en skrivebeskyttet egenskab og returnerer resultatet i pixels. Egenskaben 'clientHeight' fungerer inde i tagget '