Ottieni l'altezza dell'elemento div in JavaScript
In HTML, tutte le proprietà CSS fornite a un elemento utilizzando i fogli di stile CSS o utilizzando JavaScript vengono impostate all’interno del Document Object Model (DOM). Attraverso questo DOM, puoi accedere facilmente a questi valori in un secondo momento all’interno del codice JavaScript. Esistono vari modi per ottenere i valori delle proprietà CSS all’interno di JavaScript. Questo articolo introdurrà come ottenere la proprietà CSS height dal nostro codice JavaScript.
Di seguito è riportato il documento HTML che abbiamo creato. All’interno abbiamo un tag body contenente un solo elemento div avente un id di container. Nel tag head, abbiamo fornito alcuni stili di base al nostro elemento div come larghezza, altezza, bordo, imbottitura, ecc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
Produzione:
Se esegui il documento HTML sopra, vedrai un rettangolo come questo nella finestra del browser.
Ora che abbiamo impostato tutto, applichiamo varie proprietà a questo elemento div container per ottenere la sua altezza. Il codice che andremo a scrivere andrà all’interno dei tag <script></script> presenti all’interno del tag body.
Vari modi per ottenere l’altezza degli elementi div in JavaScript
Innanzitutto, otterremo il riferimento dell’elemento container dal DOM HTML utilizzando il metodo getElementById(). Quindi memorizzeremo quell’elemento all’interno della variabile elemento in JavaScript.
let element = document.getElementById('container');
Ora che abbiamo l’elemento div, otteniamo l’altezza del div usando varie proprietà usando JavaScript.
1. clientHeight
Il clientHeight restituisce l’altezza di un elemento compreso il padding come valore intero.
console.log(element.clientHeight);
Produzione:
58
Poiché abbiamo aggiunto il padding di 4px a tutti e quattro i lati del contenitore durante il calcolo dell’altezza, che attualmente è 50px, il padding di 4px in alto e di 4px in basso, cioè, il padding totale di 8px sarà essere aggiunto all’altezza. Ciò si tradurrà in un’altezza totale di 58px.
2. offsetHeight
L’offsetHeight consiste nell’altezza dell’elemento che include anche eventuali padding, bordi e barra di scorrimento orizzontale (se presente).
console.log(element.offsetHeight);
Produzione:
60
Simile alla proprietà clientHeight, la proprietà offsetHeight prenderà anche il padding 8px, l’altezza del contenuto che è 50px e anche la larghezza del bordo che è 1px in alto e 1px in basso che è totale di 2px . Pertanto l’altezza complessiva restituita da questa proprietà sarà 8 + 50 + 2 cioè 60px.
3. scorriAltezza
Lo scrollHeight restituisce l’altezza del contenuto, compreso il contenuto che non è visibile sullo schermo a causa dell’overflow. Include solo il riempimento dell’elemento ma non il bordo, il margine o la barra di scorrimento orizzontale.
Lo scrollHeight è simile al clientHeight. L’unica differenza tra clientHeight e scrollHeight è che scrollheight può includere anche l’altezza del contenuto, che al momento non è visibile sullo schermo a causa dell’overflow.
console.log(element.scrollHeight);
Produzione:
58
L’altezza del contenuto è 50px e l’imbottitura totale è 8px. Pertanto, l’altezza totale restituita dalla proprietà scrollHeight è 58px.
4. getBoundingClientRect()
Il metodo getBoundingClientRect() restituisce un oggetto che contiene informazioni relative alla larghezza e all’altezza dell’elemento, nonché alla sua posizione (x, y, in alto, a sinistra, ecc.) rispetto alla finestra. L’altezza calcolata con questo metodo contiene anche padding e bordi.
console.log(element.getBoundingClientRect().height);
Produzione:
60
Quindi, per ottenere l’altezza dell’elemento dall’oggetto restituito dal metodo getBoundingClientRect(), dobbiamo usare il tasto height per ottenere l’altezza. Qui, l’altezza dell’elemento è 50px, il padding è 8px e la larghezza del bordo è 2px. Quindi, questa funzione restituirà un’altezza totale di 60px.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn