Come faccio a recuperare la larghezza e l'altezza effettive di un elemento HTML?

Durante lo sviluppo di siti Web utilizzando JavaScript, in molti casi, gli sviluppatori devono recuperare una larghezza e l'altezza effettiva di un elemento HTML. Ad esempio, elementi dinamici di dimensionamento o posizionamento su una pagina Web, regolazioni del layout, ecc.

Questo articolo spiegherà i modi per recuperare una larghezza e l'altezza effettiva di un elemento HTML.

Come recuperare/ottenere l'altezza e la larghezza effettivi degli elementi HTML?

Per recuperare la larghezza e l'altezza di un elemento HTML, utilizzare i seguenti approcci:

• Usando "ClientWidth" E "ClientHeight" Proprietà
• Usando "Offsetwidth" E "fuori" Proprietà

Metodo 1: recuperare la larghezza e l'altezza effettive di un elemento HTML utilizzando le proprietà "clientwidth" e "clientheight"

Usa il "ClientWidth" E "ClientHeight"Proprietà per il recupero dell'altezza e della larghezza effettive di un elemento HTML. "ClientWidth" e "ClientHeight" rappresentano le dimensioni dell'area del contenuto dell'elemento, come la larghezza interna e l'altezza di un elemento durante l'imbottitura, il bordo e il margine sono esclusi.

Sintassi

Utilizzare la seguente sintassi per ottenere la larghezza e l'altezza di un elemento utilizzando le proprietà "clientwidth" e "clientHeight":

elemento.ClientWidth
elemento.ClientHeight

Esempio

In un file HTML, utilizzare gli elementi HTML "div","arco", E "H4"Per mostrare un po 'di testo sulla pagina:

> Per l'apprendimento di JavaScript segui Linuxhint

Recupera la larghezza e l'altezza effettive dell'elemento HTML

Ora, controlla la larghezza e l'altezza di un "div"Elemento. Quindi, prima, ottieni il riferimento dell'elemento Div usando il "getElementById ()"Metodo passando l'ID assegnato come argomento:

Let Div = Document.getElementById ('div');

Chiama le proprietà "ClientWidth" e "ClientHeight" con un elemento Div e memorizza i loro valori risultanti nelle variabili "DivWidth" E "Divheight":

Let DivWidth = Div.ClientWidth;
Let Divheight = Div.ClientHeight;

Stampa la larghezza e l'altezza del div sulla console usando il "console.tronco d'albero()" metodo:

console.log (divwidth, divheight);

L'output mostra la larghezza di Div "842"E altezza che contiene è"59":

Metodo 2: recuperare la larghezza e l'altezza effettiva di un elemento HTML usando le proprietà "offsetwidth" e "offsetheight"

Per ottenere/recuperare la larghezza e l'altezza effettiva di un elemento, utilizzare il “Offsetwidth" E "fuori" proprietà. "Offsetwidth" e "Offsetheight" sono proprietà che forniscono informazioni sulle dimensioni di un elemento mentre imbottiti, bordo e margine sono inclusi.

Sintassi

Segui la sintassi data per le proprietà "offsetwidth" e "offsetheight":

elemento.Offsetwidth
elemento.fuori

Esempio

Qui vedremo la larghezza e l'altezza dell'elemento H4 usando le proprietà "offsetwidth" e "offsetheight":

Lascia che HeadingWidth = Heading.offsetwidth;
Lascia che HeadingHeight = Heading.in parte;

Produzione

Si trattava di recuperare la larghezza e l'altezza effettive dell'elemento HTML.

Conclusione

Per recuperare una larghezza e l'altezza effettiva di un elemento HTML, utilizzare il “ClientWidth" E "ClientHeight" o il "Offsetwidth" E "fuori" proprietà. "ClientWidth" e "ClientHeight" vengono utilizzati per calcolare la larghezza e l'altezza di un elemento durante l'imbottitura, il bordo e il margine sono esclusi. La "offsetwidth" e "offsetheight" calcolano la larghezza e l'altezza di un elemento, tra cui bordo, imbottitura e margine. Questo articolo ha spiegato i modi per recuperare una larghezza e l'altezza effettiva di un elemento HTML.