Den här bloggen visar användningen av DOM-elementet klienthöjd i HTML.
Hur man använder DOM Element 'clientHeight' i HTML?
den ' klienthöjd ”-egenskapen tillåter utvecklare att beräkna höjden på ett elements synliga innehåll. Det hjälper till att placera element i förhållande till varandra eller avgöra om en användare har rullat till högerkanten av en rullningsbar behållare. Den ger också information om det återstående oanvända utrymmet på webbsidan.
Exempel
Låt oss gå igenom ett exempel för en bättre demonstration av egenskapen 'clientHeight'. Till exempel, ' onclick ' händelseavlyssnare används för att visa resultatet från ' klienthöjd ' fast egendom:
< kropp >
< h2 id = 'element' >< / h2 >
< h2 id = 'element' onclick = 'showelementHeight()' >
Klicka på Linuxhint-artikel för att visa Height!
< / h2 >
< manus >
function showelementHeight() {
var exempel = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Höjden är: ' + elementHeight + ' pixlar.');
}
< / manus > >
< / kropp >
Förklaringen av ovanstående kodavsnitt beskrivs nedan:
- Skapa först en ' '-taggen inuti '
” tagga och ge lite dummydata till den. Tilldela också ett id för ' element ” till det valda HTML-elementet. - Lägg sedan till en ' onclick() ' händelseavlyssnare som anropar ' showelementHeight() '-funktionen när användaren klickar på ' ' element.
- Sedan, inuti ' showelementHeight() '-funktionen skapar en variabel med namnet ' exempel ' som fungerar som en instans för HTML-elementet som har ett id på ' element ”.
- Skapa sedan en annan variabel med namnet ' elementHeight '' som lagrar resultatet från egenskapen 'clientHeight'.
- Efter det, visa ' elementHeight '' variabel på varningsrutan med hjälp av ' varna() 'metoden.
I slutändan, lägg till följande CSS-egenskaper för styling av ' h2 ' element:
< stil >
#element {
marginal: 20px;
stoppning: 10px;
bakgrund- Färg : mörkcyan;
höjd : 300px;
text- justera : Centrum;
linje- höjd : 100px;
}
< / stil >
I ovanstående kodavsnitt tilldelas följande CSS-egenskaper till div som har ett id på ' element ”:
- den ' 20px ”, “ 10px ' och ' mörkcyan ' värden tillhandahålls till CSS ' marginal ”, “ stoppning ' och ' bakgrundsfärg ” fastigheter respektive.
- Använder även ' höjd ”, “ textjustera ' och ' radavstånd ” CSS-egenskaper för att förbättra användarens synlighet.
Efter exekveringen av ovanstående kodavsnitt ser webbsidan ut så här:
Utdata visar att höjden på det valda elementet visas i varningsrutan när användaren klickar på elementet.
Slutsats
För att använda ' klienthöjd ” egenskap i HTML, välj HTML-elementet genom att komma åt id-attributet. Efter det, bifoga egenskapen 'clientHeight' och visa resultatet. Det är en skrivskyddad egenskap och returnerar resultatet i pixlar. Egenskapen 'clientHeight' fungerar inuti taggen '