Dal momento che sappiamo tutti che possiamo svolgere molte attività divertenti usando jQuery a causa del suo agenda leggero e "scrivi meno, fai di più". Una di queste attività è apportare modifiche alle proprietà in stile CSS degli elementi HTML. Puoi cambiare CSS usando il CSS () Metodo di jQuery.

Qui in questa guida, abbiamo spiegato in dettaglio questo metodo, inoltre, abbiamo dimostrato diversi esempi che ti aiutano a comprendere meglio il metodo e il suo utilizzo.

Metodo CSS ()

Il metodo CSS () in jQuery viene utilizzato allo scopo di recuperare o applicare una o più proprietà di stile a un elemento HTML.

Sintassi

Per applicare una proprietà CSS.

css ("proprietà", "valore");

Per recuperare una proprietà CSS.

CSS ("Proprietà");

Per applicare più proprietà CSS.

CSS ("Proprietà": "Valore", "Proprietà": "Valore" ...);

Per comprendere meglio il metodo CSS (), esploriamo alcuni esempi.

Esempio 1: come impostare una proprietà CSS

Supponiamo di voler impostare il colore di sfondo di a

Elemento usando il metodo CSS () in jQuery.

Html

Impostazione di una proprietà CSS

Imposta il colore di sfondo di H1

Nel codice HTML sopra, abbiamo creato un

, e un elemento.

jQuery

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

Nel codice jQuery sopra, abbiamo applicato un colore di sfondo giallo al

Elemento usando il metodo CSS ().

Produzione

Prima di fare clic sul pulsante.

Dopo aver fatto clic sul pulsante.

Il colore di sfondo dell'intestazione è stato impostato correttamente.

Come recuperare una proprietà CSS

Supponiamo di voler recuperare qualsiasi proprietà CSS di un elemento, ad esempio, colore di sfondo di un elemento div. Segui il codice qui sotto.

Html

Ciao mondo

Restituire il colore di fondo di Div

Qui abbiamo creato un e un elemento.

jQuery

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

Nel codice sopra, il metodo CSS () viene utilizzato solo per estrarre il colore di sfondo assegnato all'elemento. Inoltre, è stato creato un messaggio di avviso che visualizzerà il colore di sfondo del div.

Produzione

Il colore di sfondo dell'elemento Div è stato recuperato e visualizzato correttamente.

Come impostare più proprietà CSS

Supponiamo di voler assegnare più proprietà in stile a qualsiasi elemento HTML tutte in una volta. Segui l'esempio di seguito.

Html

Qualche paragrafo.

Imposta più stili

Nel codice sopra, abbiamo creato un file

elemento insieme a un elemento.

jQuery

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").CSS ("Background-color": "Yellow", "Padding": "25px", "Larghezza": "200px");
);
);

Usando il metodo JQuery CSS () abbiamo applicato un colore di sfondo al

elemento e assegnato un po 'di imbottitura e larghezza.

Produzione

Può essere verificato dall'output sopra che vengono applicati più stili al paragrafo tutti in una volta.

Conclusione

È possibile modificare CSS utilizzando il metodo jQuery CSS () che viene utilizzato allo scopo di ottenere o impostare le proprietà di stile di un elemento. Usando questo metodo è possibile applicare più stili a un HTML tutti in una volta manipolando le proprietà in stile CSS. Questo tutorial ti guida su come cambiare CSS in vari modi attraverso il metodo JQuery CSS () insieme agli esempi pertinenti per una migliore comprensione.