Hvordan endre CSS med JavaScript

HTML -språket er ganske enkelt et markeringsspråk som ikke kan utføre noen funksjoner, og ikke kan utføre koder basert på forskjellige dynamiske hendelser. For dette formålet må vi bruke JavaScript for å endre CSS -stilen til noe HTML -element, da HTML ikke kan gjøre dette på egen hånd.

Det kan være forskjellige grunner til at vi trenger å endre CSS og manipulere med HTML -elementer, det kan være å laste stilarket dynamisk, for å endre en knapps farge når en bruker klikker på den, eller å skrive CSS i JavaScript. Alle disse endringene kan gjøres gjennom JavaScript. I denne artikkelen ser vi forskjellige måter å få tilgang til CSS med JavaScript og endre det på.

Bruker JavaScript for å endre CSS

Det er forskjellige metoder i JavaScript som hjelper til med å få tilgang til HTML -elementer og gjennom at vi kan manipulere verdiene til CSS. Noen av disse metodene er forklart nedenfor sammen med eksempler.

Bruke getElementsByClassName ()

Metoden getElementByClassName () tar inn en streng som et klassenavn og søker i hele HTML -dokumentet og returnerer elementene med samme klassenavn. Når klassenavnet er identifisert, kan vi endre CSS -egenskapene som vist nedenfor i eksemplet:

Html:

Input Box:


Endre grense

JavaScript:

Her søkte vi på HTML -elementet etter klassenavn og endret CSS -egenskapene til disse elementene ved hjelp av stil.bakgrunnsfarge og stil.grensefarge.

Produksjon:

Bruke getElementById ()

En annen metode å bruke er getElementById () som søker i alle HTML -elementene med lignende ID -er og utfører den tildelte funksjonen på dem. Stort sett brukes forskjellige divs som er tildelt med ID -er, og disse ID -ene blir søkt ved hjelp av denne metoden. Dette er de mest brukte metodene av utviklere, nedenfor er et eksempel:

Html:

Input Box:


Endre grense

JavaScript:

Her har vi brukt metoden for å søke i alle elementene ved hjelp av ID -en og endret CSS -egenskapene ved hjelp av stil.

Produksjon:

Bruke QuerySelector ()

En annen metode som fungerer akkurat som de to ovennevnte metodene er QuerySelector () Metode som kan søke etter klassenavn, ID -navn og til og med med HTML -tagger, men det returnerer bare det første HTML -elementet som er nevnt for å søke. Nedenfor er måtene å bruke QuerySelector:

dokument.querySelector ("# id of div");
dokument.QuerySelector (". CSS klassenavn ");
dokument.QuerySelector ("HTML TAG som: DIV>");

Nedenfor er et eksempel på QuerySelector () og hvordan det kan brukes med klassenavn, ID -er osv.:

Html:

Input Box:


Endre grense

JavaScript:

Her brukte vi QuerySelector () -metoden for å søke etter klasser og ID for DIVS, og endret CSS -egenskapene deres.

Produksjon:

Konklusjon

Det er forskjellige grunner til å endre CSS, og den beste måten å gjøre det på er å bruke JavaScript, da det enkelt kan få tilgang til elementene i HTML og endre CSS -egenskapene. I denne artikkelen diskuterte vi hvordan du endrer CSS ved hjelp av JavaScript, forskjellige metoder gitt i JavaScript for å endre verdiene til HTML -elementer. Disse gjør jobben til utviklerne enkel og gjør websiden mer dynamisk. Gjennom disse metodene kan vi endre knappfarger på klikk, bakgrunnsfarger, fontfarger osv. Enkelt og manipulere ytterligere med CSS -egenskaper.