Siden vi alle vet at vi kan utføre mange morsomme oppgaver ved å bruke jQuery på grunn av dens lette og "skrive mindre, gjør mer" agenda. En slik oppgave er å gjøre endringer i CSS -stilegenskaper til HTML -elementer. Du kan endre CSS ved å bruke CSS () metode for jQuery.

Her i denne guiden har vi forklart denne metoden i detalj, dessuten har vi demonstrert forskjellige eksempler som hjelper deg å bedre forstå metoden og bruken.

CSS () -metode

CSS () -metoden i jQuery brukes til å enten hente eller anvende en eller flere stilegenskaper på et HTML -element.

Syntaks

For å bruke en CSS -eiendom.

CSS ("eiendom", "verdi");

Å hente en CSS -eiendom.

CSS ("eiendom");

For å bruke flere CSS -egenskaper.

css ("eiendom": "verdi", "eiendom": "verdi" ...);

For bedre å forstå CSS () -metoden, la oss utforske noen eksempler.

Eksempel 1: Hvordan sette en CSS -eiendom

Anta at du vil stille bakgrunnsfargen til en

element ved bruk av CSS () -metoden i jQuery.

Html

Sette en CSS -eiendom

Sett bakgrunnsfarge av H1

I ovennevnte HTML -kode har vi opprettet en

, og et element.

jQuery

$ (dokument).klar (funksjon ()
$ (".knapp").klikk (funksjon ()
$ ("H1").CSS ("bakgrunnsfarge", "gul");
);
);

I ovennevnte jQuery -kode har vi brukt en gul bakgrunnsfarge på

element ved bruk av CSS () -metoden.

Produksjon

Før du klikker på knappen.

Etter å ha klikket på knappen.

Bakgrunnsfargen på overskriften er satt vellykket.

Hvordan hente en CSS -eiendom

Anta at du vil hente enhver CSS -egenskap til et element, for eksempel bakgrunnsfarge på et DIV -element. Følg koden nedenfor.

Html

Hei Verden

Returner bakgrunnsfarge av div

Her har vi laget et, og et element.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
Varsel ("Bakgrunnsfarge =" + $ ("Div").CSS ("bakgrunnsfarge"));
);
);

I koden ovenfor brukes CSS () -metoden bare for å trekke ut bakgrunnsfargen tildelt elementet. Dessuten er det opprettet en varslingsmelding som vil vise bakgrunnsfargen på DIV.

Produksjon

Bakgrunnsfargen på DIV -elementet er hentet og vist vellykket.

Hvordan sette flere CSS -egenskaper

Anta at du vil tilordne flere stilegenskaper til ethvert HTML -element på en gang. Følg eksemplet nedenfor.

Html

Noe avsnitt.

Angi flere stiler

I koden ovenfor har vi opprettet en

element sammen med et element.

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P").CSS ("bakgrunnsfarge": "gul", "padding": "25px", "bredde": "200px");
);
);

Ved hjelp av jQuery CSS () -metoden har vi brukt en bakgrunnsfarge på

element og tildelt det litt polstring og bredde.

Produksjon

Det kan verifiseres fra outputten ovenfor at flere stiler blir brukt på avsnittet på en gang.

Konklusjon

Du kan endre CSS ved hjelp av JQuery CSS () -metoden som brukes med det formål å få eller sette stilegenskaper til et element. Ved å bruke denne metoden kan du bruke flere stiler på en HTML på en gang ved å manipulere CSS -stilegenskaper. Denne opplæringen guider deg om hvordan du endrer CSS på forskjellige måter gjennom jQuery CSS () -metode sammen med de relevante eksemplene for bedre forståelse.