Come impostare le dimensioni di elementi HTML usando jQuery

L'impostazione corretta delle dimensioni degli elementi HTML è molto significativa quando si strutturano il layout di una pagina Web perché le dimensioni giuste migliorano l'aspetto generale del tuo sito Web che in cambio aumenta l'esperienza utente. JQuery fornisce molti metodi che ti aiutano a svolgere questo compito con grande facilità.

Le dimensioni degli elementi HTML possono essere impostate utilizzando i metodi jQuery di seguito.

1. Metodo della larghezza ()
2. Metodo di altezza ()
3. Metodo InnnerWidth ()
4. Metodo InnnerHeight ()
5. Metodo OuterWidth ()
6. Metodo esterno ()

Esploriamoli in dettaglio.

Metodo della larghezza ()

Ai fini di impostare o recuperare la larghezza degli elementi HTML, viene utilizzato il metodo della larghezza ().

Questo metodo funziona in modo tale che quando viene utilizzato solo per recuperare la larghezza di un elemento restituisce la larghezza del primo elemento abbinato, tuttavia, quando utilizzato per l'impostazione della larghezza, imposta la larghezza di tutti gli elementi abbinati.

Sintassi

Per recuperare la larghezza di un elemento.

$ (selettore).larghezza()

Per impostare la larghezza di un elemento.

$ (selettore).larghezza (valore)

Esempio

Supponiamo di voler cambiare la larghezza di un elemento usando il metodo di larghezza jQuery (). Usa il codice qui sotto.

Html

Imposta larghezza

Nel codice HTML sopra, abbiamo creato un e un elemento. Inoltre abbiamo dato uno stile all'elemento usando CSS in linea.

jQuery

$ (documento).ready (function ()
$ ("#bottons").Click (function ()
$ ("div").larghezza (500);
);
);

In questo codice jQuery, il metodo width () viene utilizzato per impostare una nuova larghezza dell'elemento su 500px.

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

La larghezza dell'elemento è stata cambiata.

Metodo heigth ()

Questo metodo funziona in modo simile al metodo della larghezza (), con l'ovvia differenza che viene utilizzato per dare o prendere l'altezza degli elementi HTML.

Questo metodo funziona anche in modo tale che quando viene utilizzato solo per recuperare l'altezza di un elemento estrae l'altezza del primo elemento che corrisponde all'elemento specificato, tuttavia, se utilizzato per l'impostazione dell'altezza, imposta l'altezza di tutte le abbinate elementi.

Sintassi

Per recuperare l'altezza di un elemento.

$ (selettore).altezza()

Per impostare l'altezza di un elemento

$ (selettore).altezza (valore)

Esempio

Supponiamo di voler impostare un po 'di altezza di un elemento usando il metodo JQuery Height (). Segui il codice qui sotto.

Html

Inserisci il tuo nome:


Visualizza l'altezza del campo di input

Qui abbiamo creato un campo di input e impostato un'altezza di 10px, larghezza di 200px e colore rosa di sfondo.

Inoltre, abbiamo creato ASLO un pulsante.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("input").altezza (20);
);
);

Abbiamo usato il metodo JQuery Height () qui per cambiare l'altezza del campo di input. L'altezza cambierà quando si fa clic sul pulsante.

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

Il metodo altezza () funziona correttamente.

Metodo InnerWidth ()

Ai fini di recuperare la larghezza interna del primo elemento che corrisponde all'elemento specificato, viene utilizzato il metodo della larghezza interna ().

Sintassi

$ (selettore).InnerWidth ()

Esempio

Supponiamo di voler visualizzare la larghezza del fuoco di un'immagine. Usa il seguente codice.

Html

Visualizza la larghezza interna dell'immagine

Qui abbiamo visualizzato un'immagine usando il tag, inoltre, abbiamo impostato la sua altezza, larghezza, imbottitura e bordo. Insieme all'immagine, abbiamo anche creato un pulsante che verrà utilizzato per visualizzare la larghezza interna dell'immagine.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Avviso ("Larghezza interna dell'immagine:" + $ ("IMG").interni awidth ());
);
);

Nel codice sopra, stiamo usando il metodo interni a larghezza () per visualizzare la larghezza interna dell'immagine.

Produzione

Prima che il pulsante venga cliccato.

Dopo aver fatto clic sul pulsante.

La larghezza interna dell'immagine è stata visualizzata.

Nota: Il metodo interni di nwidth () include imbottitura anche durante la visualizzazione della larghezza interna di un elemento.

Metodo InnerHeight ()

Il metodo interno () viene utilizzato per recuperare l'altezza interna del primo elemento che corrisponde all'elemento specificato.

Sintassi

$ (selettore).innerHeight ()

Esempio

Useremo l'esempio utilizzato nella sezione sopra per comprendere il lavoro del metodo jQuery internerheight ().

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Alert ("Altezza interna dell'immagine:" + $ ("IMG").interno ());
);
);

Abbiamo usato il metodo interno () per estrarre l'altezza interna dell'immagine del cane.

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

Il metodo internione () funziona correttamente.

Nota: Il metodo interno () include anche l'imbottitura anche durante la visualizzazione dell'altezza interna di un elemento.

Metodo OuterWidth ()

Ai fini di recuperare la larghezza esterna del primo elemento che corrisponde all'elemento specificato, viene utilizzato il metodo della larghezza esterna ().

Sintassi

$ (selettore).OuterWidth ()

Esempio

Supponiamo di voler estrarre la larghezza esterna di un elemento div. Ecco come lo fai.

Html

Larghezza esterna di div

Abbiamo creato un div e gli abbiamo dato un certo colore di sfondo, altezza, larghezza, imbottitura e bordo. Inoltre, abbiamo anche creato un pulsante.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Alert ("Larghezza esterna di Div:" + $ ("Div").OuterWidth ());
);
);

Qui abbiamo usato il metodo JQuery OuterWidth () per visualizzare la larghezza esterna dell'elemento Div.

Produzione

Prima che il pulsante venga fatto clic.

Quando si fa clic sul pulsante.

Il metodo OuterWidth () funziona correttamente.

Nota: Il metodo OuterWidth () calcola l'imbottitura e il bordo mentre mostra la larghezza esterna di un elemento.

Metodo esterno ()

Il metodo esterno () viene utilizzato per recuperare l'altezza esterna del primo elemento che corrisponde all'elemento specificato.

Sintassi

$ (selettore).esterno ()

Esempio

Utilizzeremo l'esempio utilizzato nella sezione sopra per comprendere il lavoro del metodo jQuery esterheight ().

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Avviso ("Altezza esterna di Div:" + $ ("Div").esterno ());
);
);

Abbiamo usato il metodo esterno () per estrarre l'altezza esterna dell'elemento div.

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

Il metodo esterno () funziona correttamente.

Nota: Il metodo esterno () include anche l'imbottitura e il bordo durante la visualizzazione dell'altezza esterna di un elemento.

Conclusione

Le dimensioni di un elemento HTML possono essere impostate usando i vari metodi jQuery che sono; larghezza (), height (), internerwidth (), internerheight (), outerWidth () ed esterheight (). I metodi di larghezza () e altezza () impostano o recuperano la larghezza e l'altezza degli elementi, rispettivamente. Mentre il metodo interni (), interno (), outerwidth () e esterno () prendono rispettivamente la larghezza interna, l'altezza interna, la larghezza esterna e l'altezza esterna dei primi elementi abbinati. Tutti questi metodi sono spiegati in dettaglio insieme agli esempi pertinenti.