Questo blog dimostra l'uso dell'elemento DOM clientHeight nell'HTML.
Come utilizzare l'elemento DOM 'clientHeight' in HTML?
IL ' clientHeight La proprietà ” consente agli sviluppatori di calcolare l'altezza del contenuto visibile di un elemento. Aiuta a posizionare gli elementi l'uno rispetto all'altro o a determinare se un utente ha fatto scorrere fino al bordo destro di un contenitore scorrevole. Fornisce inoltre informazioni sullo spazio inutilizzato rimanente sulla pagina web.
Esempio
Esaminiamo un esempio per una migliore dimostrazione della proprietà 'clientHeight'. Ad esempio, il “ al clic ” il listener di eventi viene utilizzato per visualizzare il risultato fornito dal “ clientHeight ' proprietà:
< corpo >
< h2 id = 'elemento' >< / h2 >
< h2 id = 'elemento' al clic = 'mostraelementoAltezza()' >
Fai clic sull'articolo Linuxhint per visualizzare Height!
< / h2 >
< copione >
funzione mostraelementoAltezza() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('L'altezza è: ' + elementHeight + ' pixels.');
}
< / copione > >
< / corpo >
La spiegazione del suddetto frammento di codice è descritta di seguito:
- Inizialmente, crea un ' ” tag all'interno del “
” e forniscigli alcuni dati fittizi. Inoltre, assegna un ID di ' elemento ” all'elemento HTML selezionato. - Successivamente, aggiungi un ' al clic() ” ascoltatore di eventi che richiama il “ mostraelementoAltezza() ” funzione quando l'utente fa clic sul pulsante “ elemento '.
- Poi, all'interno del “ mostraelementoAltezza() La funzione ' crea una variabile denominata ' esempio ” che funge da istanza per l'elemento HTML che ha un id di “ elemento ”.
- Successivamente, crea un'altra variabile denominata ' elementoAltezza '' che memorizza il risultato fornito dalla proprietà 'clientHeight'.
- Successivamente, visualizzare il ' elementoAltezza '' nella casella di avviso utilizzando la variabile ' mettere in guardia() ' metodo.
Alla fine, aggiungi le seguenti proprietà CSS per applicare lo stile a ' h2 elemento ':
< stile >
#elemento {
margine: 20px;
imbottitura: 10px;
sfondo- colore : ciano scuro;
altezza : 300px;
testo- allineare : centro;
linea- altezza : 100 pixel;
}
< / stile >
Nello snippet di codice sopra, le seguenti proprietà CSS sono assegnate al div con un id di ' elemento ”:
- IL ' 20px ”, “ 10px ' E ' darkcyan ” i valori sono forniti al CSS “ margine ”, “ imbottitura ' E ' colore di sfondo ” proprietà, rispettivamente.
- Utilizza anche “ altezza ”, “ allineamento del testo ' E ' altezza della linea ” Proprietà CSS per migliorare la visibilità dell'utente.
Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così:
L'output indica che l'altezza dell'elemento selezionato viene visualizzata nella casella di avviso, ogni volta che l'utente fa clic sull'elemento.
Conclusione
Per utilizzare il “ clientHeight ” in HTML, selezionare l'elemento HTML accedendo all'attributo id. Successivamente, collega la proprietà 'clientHeight' e visualizza il risultato. È una proprietà di sola lettura e restituisce il risultato in pixel. La proprietà 'clientHeight' funziona all'interno del tag '