Hvordan legger du til CSS med JavaScript

Det er forskjellige scenarier når programmerere trenger å style siden ved hjelp av JavaScript. For eksempel å dynamisk endre stilen til elementene på brukerinteraksjoner, inkludert å vise forskjellige animasjoner eller stiler på fokus eller sveve på hvilken som helst tekst, og så videre. For dynamisk styling er bruk av CSS -styling i JavaScript mer effektiv. Det gir en fleksibel og dynamisk måte å administrere stiler og gjøre applikasjoner mer brukervennlige.

Denne artikkelen vil beskrive metodene for å legge til CSS med JavaScript.

Hvordan legge til CSS med JavaScript?

I JavaScript kan du legge CSS -stiler til et element ved å endre stilegenskapen ved å bruke følgende metoder eller tilnærminger:

• stilegenskaper som inline styling
• setAttribute () -metode som inline styling
• CreateElement () -metode som en global styling

Metode 1: Legg til CSS med JavaScript ved å bruke "stil" -egenskapen

For å legge til CSS i JavaScript, bruk "stil”Eiendom. Det brukes til å få tilgang til og manipulere inline -stilene til et element. Det gir et objekt som representerer inline -stilene til et element og lar en få eller angi individuelle stilegenskaper.

Syntaks
For å legge til CSS -stil i JavaScript, brukes følgende syntaks for "stil”Eiendom:

element.stil;

Her, “element”Er en referanse til et HTML -element.

Eksempel
I det følgende eksemplet vil vi style knappene ved hjelp av JavaScript. For det første vil vi lage tre knapper og tilordne ID -er til dem, som hjelper deg med å få tilgang til knappelementene for styling:

Bli enige
Avvise
Aksepterer

Før styling vil utdataene se slik ut:

La oss nå style disse knappene i JavaScript ved å bruke "stil”Eiendom. Først må du få alle knappelementene ved å bruke sine tildelte ID -er ved hjelp av "getElementById ()”Metode:

La enig = dokument.getElementById ("BTN1");
La avvise = dokument.getElementById ("Btn2");
La akseptere = dokument.getElementById ("BTN3");

Angi bakgrunnsfargene på alle disse knappene ved å bruke “stil”Eiendom:

bli enige.stil.BakgrunnColor = "Green";
avvise.stil.BakgrunnColor = "Rød";
aksepterer.stil.BakgrunnColor = "Gul";

Som du kan se, har knappene blitt med suksess stylet ved hjelp av “stil”Eiendom:

Metode 2: Legg til CSS med JavaScript ved bruk av "setAttribute ()" -metode

For å legge til CSS -styling i JavaScript, bruk "setAttribute ()”Metode. Det brukes til å sette eller legge til en attributt og dens verdi til et HTML -element.

Syntaks
Følgende syntaks brukes for "setAttribute ()”Metode:

element.setAttribute (attributt, verdi);

Eksempel
Her vil vi sette de forskjellige stilene på knappene i JavaScript ved å bruke “setAttribute ()”Metode. Still grensradiusen til alle knapper til “.5REM”, Og tekstfargen på“Bli enige”Og“Avvise”Knapper til“hvit”.

bli enige.SetAttribute ("Style", "bakgrunnsfarge: Grønn; Farge: Hvit; Border-Radius: .5rem; ");
avvise.setAttribute ("Style", "bakgrunnsfarge: rød; farge: hvit; grensen-radius: .5rem; ");
aksepterer.SetAttribute ("Style", "bakgrunnsfarge: Gul; Border-Radius: .5rem; ");

Produksjon

Metode 3: Legg til CSS med JavaScript ved bruk av “CreateElement ()” -metoden

Hvis du vil lage klasser eller ID -er i JavaScript -styling som i CSS -stylingen, bruk "CreateElement ()”Metode. Det brukes til å lage et nytt element dynamisk. For styling skaper en “stil”Element ved hjelp av denne metoden. “CreateElement ('Style')”Metode i JavaScript brukes til å dynamisk lage et nytt stilelement, som kan brukes til å legge CSS -stiler på en webside.

Syntaks
Den gitte syntaks brukes til “CreateElement ()”Metode:

dokument.CreateElement (elementType);

For å legge til CSS -stil i JavaScript, bruk den gitte syntaks:

const stil = dokument.CreateElement ('stil');

Legg deretter stilelementet i hodemerket ved å bruke syntaksen nedenfor:

dokument.hode.vedlegg (stil);

Her, “stil”Er en referanse til det nyopprettede stilelementet, og“dokument.hode”Er hovedelementet i HTML -dokumentet.

Eksempel
Først må du lage et stilelement ved hjelp av "CreateElement ()”Metode:

var stil = dokument.CreateElement ('stil');

Nå, lage en “btn”Klasse for å bruke samme styling på alle knapper og ID -er”BTN1”,“Btn2”Og“BTN3”For individuell knappestyling:

stil.indrehtml = '
.btn
Fontstørrelse: 1.1REM;
polstring: 3px;
Margin: 2px;
Font-Family: Sans-Serif;
Border-Radius: .5REM;

#btn1
bakgrunnsfarge: grønn;
Farge: Hvit;

#btn2
bakgrunnsfarge: rød;
Farge: Hvit;

#btn3
bakgrunnsfarge: gul;

';

Legg nå stilelementet til dokumentet ved å passere som en parameter til "vedlegg ()”Metode:

dokument.hode.vedlegg (stil);

Produksjon

Det handler om å legge til CSS i JavaScript.

Konklusjon

For å legge til CSS med JavaScript, bruk inline -stylingen inkludert "stil”Eiendom, og“setAttribute ()”Metode, eller den globale stylingen ved å bruke“CreateElement ()”Metode. Global styling er mer effektiv mens en inline -metode ikke anbefales, da det gjør det vanskelig å opprettholde applikasjonsstilene og kan føre til kode repetisjon. Denne artikkelen beskrev metodene for å legge til CSS med JavaScript.