Come ottenere la larghezza dell'elemento in JavaScript
Nella fase del test di una pagina Web o del sito Web durante la progettazione, ottenere le dimensioni degli elementi inclusi nel modello di oggetti documenti (DOM) è di grande aiuto per regolare varie funzionalità aggiunte e formattarle di conseguenza. Questo approccio si traduce anche nel far risaltare un sito Web rendendolo leggibile e una progettazione di documenti accessibile generale.
Questo articolo dimostrerà i metodi da considerare per calcolare la larghezza di un elemento in JavaScript.
Come ottenere la larghezza di un elemento in JavaScript?
La larghezza di un elemento può essere calcolata in JavaScript utilizzando i seguenti approcci:
- "Offsetwidth" proprietà.
- "ClientWidth" proprietà.
- "getBoundingClientRect ()" metodo.
Questi approcci saranno ora discussi in dettaglio uno per uno!
Metodo 1: ottenere la larghezza dell'elemento in JavaScript utilizzando la proprietà OffsetWidth
Questa proprietà può essere applicata per accedere a un elemento contro il recupero "id"E calcola la sua larghezza esterna.
Panoramica il seguente esempio per la dimostrazione.
Esempio
In primo luogo, includi un "
Successivamente, contenere l'immagine specificata in “div"Elemento associato a un"id":
Successivamente, accedi all'immagine contenuta e applica il “Offsetwidth"Proprietà per calcolare la larghezza dell'immagine:
var getElement = documento.getElementById ('IMG').offsetwidth;
Dopo il calcolo, accedi alla sezione dell'intestazione specificata prima e visualizza la larghezza dell'immagine usando "testo interno" proprietà:
var get = document.getElementById ("testa")
Ottenere.InnerText = "La larghezza dell'elemento è:" + getElement;
Ottenere.InnerText = "La larghezza dell'elemento è:" + larghezza;
Produzione
Metodo 2: ottenere la larghezza dell'elemento in JavaScript utilizzando la larghezza client
Proprietà
Questa proprietà può anche essere implementata in modo simile all'approccio precedente. La differenza principale è che calcola la larghezza interna dell'elemento specificato.
Esempio
Innanzitutto, rianima i metodi sopra discussi per includere una voce:
Ottieni la larghezza dell'elemento HTML usando JavaScript
In questo particolare esempio, includi l'intestazione specificata contenuta nel "div"Elemento specificato da"id". Questo particolare intestazione verrà calcolato per "larghezza":
Questo è un elemento intestazione
Questo particolare tag si riferisce alla larghezza calcolata da visualizzare su DOM:
<H4 id = "status">H4><br>
Ora, crea un pulsante con un allegato "al clic"Evento che invoca la funzione getWidth ():
Infine, definisci una funzione chiamata "getwidth ()". Qui, prendi l'intestazione da calcolare per la larghezza. Nel passaggio successivo, applica il "ClientWidth"Proprietà per eseguire l'operazione dichiarata e allo stesso modo, il"testo interno"La proprietà visualizzerà la larghezza dell'intestazione:
funzione getwidth ()
var getElement = documento.getElementById ("Myelement");
var get = document.getElementById ("Stato")
var width = getElement.ClientWidth;
Ottenere.InnerText = "La larghezza dell'elemento è" + larghezza + "px";
Produzione
Metodo 3: Ottieni la larghezza dell'elemento in JavaScript usando il metodo getBoundingClientRect ()
Questo metodo restituisce la dimensione di un elemento. Questo metodo può essere integrato con "larghezza"Proprietà per misurare la larghezza del campo di input.
Guarda il seguente esempio.
Esempio
Innanzitutto, contenere un input "testo"Campo con il valore di segnaposto specificato e l'evento allegato"onmouseover":
Ora, definisci una funzione chiamata "getwidth ()"E accedi al campo di input specificato. Questo campo di input verrà calcolato per le dimensioni e la larghezza utilizzando "getBoundingClientRect ()"Metodo e proprietà di larghezza rispettivamente.
Infine, visualizza la larghezza calcolata:
funzione getwidth ()
var getElement = documento.getElementById ('field');
var position = getElement.getBoundingClientRect ();
var larghezza = posizione.larghezza;
avviso (larghezza);
Produzione
Questo articolo ha spiegato i metodi per calcolare la larghezza dell'elemento in JavaScript.
Conclusione
IL "Offsetwidth"Proprietà, la"ClientWidth"Proprietà o il"getBoundingClientRect ()"Il metodo può essere optato per ottenere la larghezza di un elemento in JavaScript. IL "Offsetwidth"La proprietà può essere utilizzata per restituire la larghezza esterna dell'elemento,"ClientWidth"La proprietà può essere utilizzata per calcolare la larghezza interna dell'elemento specificato o del"getBoundingClientRect ()"Può essere scelto per calcolare la dimensione dell'elemento specificato ed estrarre la larghezza da esso. Questo articolo ha dimostrato i metodi per calcolare la larghezza di un elemento in JavaScript.