Hvordan style HTML -elementer i jQuery

Stilegenskaper for utvalgte HTML -elementer tildeles eller returneres ved hjelp av jQuery CSS () metode. Når den brukes som en getter -funksjon, returnerer den eiendomsverdien til det første matchede HTML -elementet. Du kan også bruke den til å stille inn enkelt- eller flere CSS -egenskaper for alle matchende elementer.

Denne oppskrivningen vil diskutere prosedyren for stil HTML -elementer i jQuery. Vi vil også demonstrere noen passende eksempler relatert til CSS () -metoden. Så la oss starte!

Hvordan få CSS -egenskap til HTML -elementer i jQuery

I jQuery kan du få den spesifiserte CSS -egenskapen til HTML -elementene ved å passere “eiendomsnavn”Som et argument i CSS () -metoden. For å gjøre det, må du følge den undergitte syntaks:

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

Du kan legge til en jQuery “velger”For å velge HTML -elementene, og CSS () -metoden brukes til å hente verdiene til den passerte eiendommen.

Eksempel: Få CSS -eiendom av HTML -elementer i jQuery
I vår "indeks.html”, Vi har lagt til en knapp og tre avsnittselementer og angitt“bakgrunnsfarge”CSS -eiendomsverdi:

Dette er første avsnitt.

Dette er 2. avsnitt.

Dette er 3. avsnitt.

sjekk bakgrunn

Neste, i vår JavaScript -fil som er navngitt som "mitt prosjekt.JS”, Vi skriver ut følgende kode:

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

Når brukeren klikker på “sjekk bakgrunn”-Knappen, jQuery vil søke etter“p”Eller avsnitt og få“bakgrunnsfarge”CSS -egenskap til det første matchede elementet. Til slutt vises en varslingsboks i nettleseren som omfatter eiendomsverdien til "bakgrunnsfarge”:

Etter å ha lagt til koden i vår “indeks.html”, Vi vil utføre den ved å bruke“Leverserver”VS -kodeforlengelse:

Klikk på “sjekk bakgrunn”-Knappen vil gi deg beskjed om bakgrunnsfargen CSS-egenskapen til første ledd i en varslingsboks:

Hvordan sette CSS -egenskap til HTML -elementer i jQuery

JQuery CSS () -metode tillater deg også å angi CSS -egenskapene til HTML -elementer. Hvis du vil endre eiendomsverdiene til et HTML -element, må du passere "eiendomsnavn”Og“verdi”Som argumenter til CSS () -metoden. Begge argumentene skal skilles med komma:

$ (velger).CSS ("PropertyName", "Verdi");

Eksempel: Å sette CSS -egenskap til HTML -elementer i jQuery
I dette eksemplet vil vi sette "bakgrunnsfarge”CSS -egenskap til alle avsnittelementene:

Dette er en overskrift

Dette er første avsnitt.

Dette er 2. avsnitt.

Dette er 3. avsnitt.

Dette er et avsnitt.

Sett bakgrunnsfarge av P

Når brukeren vil klikke på den medfølgende knappen, vil den stille bakgrunnsfargen for hvert avsnittselement til “gul”:

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

Du kan se fra den undergitte utgangen som “bakgrunnsfarge”CSS -egenskapsverdi for avsnittselementene blir nå endret til“gul”:

Hvordan sette flere CSS -egenskaper til HTML -elementer i jQuery

For å sette flere CSS-egenskaper til HTML-elementer med CSS () -metoden, må du følge den undergitte syntaksen:

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

Her må du skrive egenskapene og deres verdier i et nøkkelverdiobjektformat, atskilt med komma.

Eksempel: Angi flere CSS -egenskaper til HTML -elementer i jQuery
I dette eksemplet vil vi endre "bakgrunnsfarge”Og“skriftstørrelse”For alle de ekstra avsnittelementene:

Dette er en overskrift

Dette er første avsnitt.

Dette er 2. avsnitt.

Dette er 3. avsnitt.

Dette er et avsnitt.

Angi flere CSS -egenskaper

På "knapp”Klikkhendelse, JQuery vil velge avsnittselementet og setter bakgrunnsfargen til“gul”Og fontstørrelse til“150%”:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("P").CSS ("bakgrunnsfarge": "gul", "fontstørrelse": "150%");
);
);

Den ovennevnte utgangen betyr at vi med hell har satt de spesifiserte flere CSS-egenskapene til de valgte HTML-elementene.

Konklusjon

JQuery CSS () -metode brukes til styling eller endring av CSS -egenskapene til de valgte HTML -elementene. Det kan brukes på forskjellige måter, fra å få CSS -eiendomsverdi til å sette enkelt- og flere HTML -egenskaper. Denne oppskrivningen diskuterte prosedyren for å style HTML-elementer i jQuery, og vi har også demonstrert noen passende eksempler relatert til CSS () -metoden.