Come modellare elementi HTML in jQuery

Le proprietà di stile per elementi HTML selezionati vengono assegnate o restituite utilizzando il jQuery CSS () metodo. Quando viene utilizzato come funzione getter, restituisce il valore della proprietà del primo elemento HTML abbinato. Puoi anche usarlo per impostare le proprietà CSS singoli o più.

Questo articolo discuterà della procedura a Stile elementi HTML in jQuery. Dimostreremo anche alcuni esempi appropriati relativi al metodo CSS (). Quindi iniziamo!

Come ottenere la proprietà CSS degli elementi HTML in jQuery

In jQuery, è possibile ottenere la proprietà CSS specificata degli elementi HTML passando il “nome della proprietà"Come argomento nel metodo CSS (). Per fare ciò, devi seguire la sintassi di seguito:

$ (selettore).CSS ("PropertyName");

Puoi aggiungere un jQuery "selettore"Per la selezione degli elementi HTML e il metodo CSS () viene utilizzato per recuperare i valori della proprietà passata.

Esempio: ottenere proprietà CSS di elementi HTML in jQuery
Nel nostro "indice.html", Abbiamo aggiunto un pulsante e tre elementi dei paragrafi e impostato i loro"colore di sfondo"Valore della proprietà CSS:

Questo è il 1 ° paragrafo.

Questo è il secondo paragrafo.

Questo è il terzo paragrafo.

Controllare lo sfondo

Successivamente, nel nostro file JavaScript che è chiamato "il mio progetto.js", Scriveremo il seguente codice:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
Alert ("sfondo color =" + $ ("p").CSS ("Colore background"));
);
);

Quando l'utente fa clic sul “Controllare lo sfondo"Pulsante, JQuery cercherà il"P"O paragrafi e ottieni il"colore di sfondo"Proprietà CSS del primo elemento abbinato. Alla fine, una casella di avviso verrà visualizzata sul browser che comprende il valore della proprietà di "colore di sfondo":

Dopo aver aggiunto il codice nel nostro "indice.html", Lo eseguiremo usando il"Server epatico"VS Extension Code:

Clicking su "Controllare lo sfondo"Il pulsante ti farà conoscere la proprietà CSS a base di sfondo del primo paragrafo in una casella di allerta:

Come impostare la proprietà CSS di elementi HTML in jQuery

Il metodo JQuery CSS () consente anche di impostare le proprietà CSS degli elementi HTML. Se si desidera modificare i valori della proprietà di un elemento HTML, passa il "nome della proprietà" E "valore"Come argomenti al metodo CSS (). Entrambi gli argomenti dovrebbero essere separati da virgola:

$ (selettore).CSS ("PropertyName", "Value");

Esempio: impostazione della proprietà CSS di elementi HTML in jQuery
In questo esempio, imposteremo il "colore di sfondo"Proprietà CSS di tutti gli elementi di paragrafo:

Questa è una voce

Questo è il 1 ° paragrafo.

Questo è il secondo paragrafo.

Questo è il terzo paragrafo.

Questo è un paragrafo.

Imposta il colore di sfondo di P

Quando l'utente farà clic sul pulsante fornito, imposterà il colore di fondo di ciascun elemento di paragrafo su "giallo":

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").CSS ("Colore sfondo", "giallo");
);
);

Puoi vedere dall'output di seguito che il "colore di sfondo"Il valore della proprietà CSS degli elementi di paragrafo è ora modificato in"giallo":

Come impostare più proprietà CSS di elementi HTML in jQuery

Per l'impostazione di più proprietà CSS degli elementi HTML con il metodo CSS (), è necessario seguire la sintassi di seguito:

CSS ("PropertyName": "Value", "PropertyName": "Value", ...);

Qui, devi scrivere le proprietà e i loro valori in un formato oggetto del valore chiave, separato da virgole.

Esempio: impostazione di più proprietà CSS degli elementi HTML in jQuery
In questo esempio, cambieremo il "colore di sfondo" E "dimensione del font"Per tutti gli elementi del paragrafo aggiunti:

Questa è una voce

Questo è il 1 ° paragrafo.

Questo è il secondo paragrafo.

Questo è il terzo paragrafo.

Questo è un paragrafo.

Imposta più proprietà CSS

SU "pulsante"Fare clic sull'evento, JQuery selezionerà l'elemento paragrafo e imposterà il colore di fondo su"giallo"E dimensionali di carattere a"150%":

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").CSS ("Background-color": "Yellow", "Font-size": "150%");
);
);

L'output di cui sopra indica che abbiamo impostato correttamente le proprietà CSS multiple specificate degli elementi HTML selezionati.

Conclusione

Il metodo JQuery CSS () viene utilizzato per lo styling o la modifica delle proprietà CSS degli elementi HTML selezionati. Può essere utilizzato in vari modi, dall'ottenere il valore della proprietà CSS all'impostazione di proprietà HTML singole e multiple. Questo articolo ha discusso della procedura per modellare elementi HTML in jQuery e abbiamo anche dimostrato alcuni esempi appropriati relativi al metodo CSS ().