Hvordan endre CSS -klasser i JavaScript

Enhver nettutvikler starter sin reise ved å lære HTML, CSS og JavaScript. HTML gir struktur til våre websider, JavaScript er et nettprogrammeringsspråk som gir oss muligheten til å samhandle med brukere, mens CSS gir oss muligheten til å style våre webapplikasjoner og websider. For å manipulere og jobbe med CSS -klassene, tilbyr JavaScript oss Klasseliste og klassenavn Egenskaper som kan brukes til å manipulere klasseattributtet.

Klassenavnet kan brukes av JavaScript for å manipulere det spesifiserte elementet mens CSS bruker det klassenavnet til å style det elementet. I dette innlegget vil vi derfor gå gjennom hvordan vi endrer CSS -klasser i JavaScript, men la oss først sette miljøet ved å initialisere elementer i HTML og deretter style det elementet i CSS.

Miljø satt opp

La oss lage et divelement som fungerer som en beholder og plassere to elementer inne i denne beholderen. En vil være den H2 Tag og den andre vil være p stikkord. For å koble CSS -filen til denne HTML har vi satt inn en lenke Merk i hodet og refererte til CSS -filen vår i HREF -attributtet (stil.CSS):

England

Hovedstaden i England er London

For å få referansen til div element inne i CSS, vi har brukt klasseattributtet. Vi utførte litt styling på Div Container så vel som elementene i Div Container.

.container
bakgrunnsfarge: RGB (54, 224, 207);

.containerh2, p
Farge: RGB (125, 104, 184);

Utgangen vil se slik ut:

Endre CSS -klasser

Som nevnt i den innledende delen av denne artikkelen, tilbyr JavaScript oss Klasseliste og klassenavn Egenskaper som kan brukes til å manipulere klasseattributtet.De klassenavn brukes til å sette en verdi til en klasse direkte, mens vi bruker klasselisteegenskapen vi kan utføre følgende funksjoner:

• Klasseliste.Legg til() brukes til å legge til klasseverdier
• Klasseliste.veksle() brukes til å slå på eller på en klasse
• Klasseliste.erstatte() brukes til å erstatte en klasseverdi med en annen klasseverdi
• Klasseliste.inneholder () brukes til å sjekke om det eksisterer en verdi eller ikke
• Klasseliste.fjerne() brukes til å fjerne en klasseverdi

La oss gå gjennom et eksempel for å bedre forstå klasselisteegenskapen og dens innebygde metoder, og vi vil bruke den samme HTML- og CSS-koden som vi brukte tidligere. La oss først bruke klassenavn -egenskapen til å tildele en klasse til H2 Egenskap. For det formålet har vi referert til en klasse i CSS som ikke eksisterer for øyeblikket og gir den litt styling vist nedenfor:

.info
Bakgrunnsfarge: Hvit;
Grense: 2px solid svart;

Neste, få referanse til H2 element ved hjelp av QuerySelector ('H2') som vil velge det første H2 -elementet i HTML -koden. Deretter bruker du klassenavn -egenskapen til å tildele info klasse til H2 -elementet. JavaScript -koden er gitt nedenfor:

// Velg første H2 -element
const MyH2 = dokument.QuerySelector ('H2');
// Sett infoklassen til MYH2
MYH2.className = 'info';

For å referere til denne JavaScript -koden, bruk skriptetoden med SRC -attributt i HTML -koden som gir JavaScript -filnavnet i SRC -attributtet:

De kode.JS er vårt JavaScript -filnavn. Nettsiden vår vil nå se slik ut:

La oss nå endre CSS -klassene ved å bruke Klasseliste eiendom. Som vi har sett tidligere, tilbyr ClassList-eiendommen oss noen innebygde metoder som vi kan bruke for å endre CSS-klasser. Vi vil bruke Klasseliste.Legg til() som vil legge til en klasse i følgende eksempel:

// Velg den første diven
const hidiv = dokument.QuerySelector ('Div');
Hidediv.Klasseliste.Legg til ('skjult'); // skjult klasse lagt til

Gå deretter til CSS -filen og initialiser den skjulte klassen ved å gjøre skjermen ingen slik at div ikke er synlig:

.skjult
Display: Ingen;

Nå vil du se at DIV -elementet vil være skjult og at du ikke vil se noe på hjemmesiden din:

La oss nå bruke Klasseliste.erstatte() Metode hvor vi vil erstatte den eksisterende skjulte klassen med en annen klasseinnpakning.

// Velg den første diven
const hidiv = dokument.QuerySelector ('Div');
Hidediv.Klasseliste.Legg til ('skjult'); // skjult klasse lagt til
Hidediv.Klasseliste.erstatte ('skjult', 'wrap'); // erstatte skjult klasse med informasjon

Neste, gå til CSS -filen din og stil innpakningsklassen:

.pakke inn
Font-størrelse: stor;

Du vil nå se at innholdet vårt nå er synlig og skriftstørrelsen vil være større enn før:

Konklusjon

JavaScript tilbyr oss to eiendommer som vi kan bruke til å endre CSS -klasser; Klasseliste og klassenavn eiendom. De klassenavn Eiendom brukes til å sette en verdi til en CSS -klasse direkte mens Klasseliste gir oss noen innebygde metoder for å manipulere CSS-klassene.

For eksempel Klasseliste.Legg til() gir oss muligheten til å legge til klasseverdier, Klasseliste.fjerne() gir oss muligheten til å fjerne en klasse, Klasseliste.veksle() gir oss muligheten til å legge til å slå til en klasse og Klasseliste.erstatte() gir oss muligheten til å erstatte en klasseverdi med en annen klasse.

I dette innlegget så vi hvordan vi skulle endre CSS -klasser ved å bruke JavaScript ved å lære om to egenskaper til JavaScript; Klasseliste og klassenavn.