Denne artikel vil beskrive metoderne til at tilføje CSS med JavaScript.
Hvordan tilføjer man CSS med JavaScript?
I JavaScript kan du tilføje CSS-stile til et element ved at ændre dets stilegenskab ved hjælp af følgende metoder eller tilgange:
- stil Ejendom som inline styling
- setAttribute() Metode som inline styling
- createElement()-metoden som en global styling
Metode 1: Tilføj CSS med JavaScript ved hjælp af egenskaben 'stil'.
For at tilføje CSS i JavaScript skal du bruge ' stil ” ejendom. Det bruges til at få adgang til og manipulere et elements inline-stile. Det giver et objekt, der repræsenterer et elements inline-stile, og giver mulighed for at få eller indstille individuelle stilegenskaber.
Syntaks
Til tilføjelse af CSS-stil i JavaScript bruges følgende syntaks til ' stil ” ejendom:
element. stil ;
Her, ' element ” er en reference til et HTML-element.
Eksempel
I det følgende eksempel vil vi style knapperne ved hjælp af JavaScript. For det første vil vi oprette tre knapper og tildele id'er til dem, hvilket hjælper med at få adgang til knapelementerne til styling:
< knap-id = 'btn2' > Afvise knap >
< knap-id = 'btn3' > Acceptere knap >
Før styling ser outputtet sådan ud:
Lad os nu style disse knapper i JavaScript ved hjælp af ' stil ” ejendom. Først skal du hente alle knapelementerne ved hjælp af deres tildelte id'er ved hjælp af ' getElementById() ” metode:
lad være enig = dokument. getElementById ( 'btn1' ) ;lad afvise = dokument. getElementById ( 'btn2' ) ;
lad acceptere = dokument. getElementById ( 'btn3' ) ;
Indstil baggrundsfarverne for alle disse knapper ved hjælp af ' stil ” ejendom:
enig. stil . baggrundsfarve = 'grøn' ;afvise. stil . baggrundsfarve = 'rød' ;
acceptere. stil . baggrundsfarve = 'gul' ;
Som du kan se, er knapperne blevet stylet med ' stil ” ejendom:
Metode 2: Tilføj CSS med JavaScript ved hjælp af metoden 'setAttribute()'.
For at tilføje CSS-styling i JavaScript skal du bruge ' setAttribute() ” metode. Det bruges til at angive eller tilføje en attribut og dens værdi til et HTML-element.
Syntaks
Følgende syntaks bruges til ' setAttribute() ” metode:
Eksempel
Her vil vi indstille de forskellige stilarter på knapperne i JavaScript ved hjælp af ' setAttribute() ” metode. Indstil kantradius for alle knapper til ' .5rem ', og tekstfarven på ' Enig ' og ' Afvise ' knapper til ' hvid ”.
afvise. setAttribute ( 'stil' , 'baggrundsfarve: rød; farve: hvid; kant-radius: .5rem;' ) ;
acceptere. setAttribute ( 'stil' , 'baggrundsfarve: gul; kant-radius: .5rem;' ) ;
Produktion
Metode 3: Tilføj CSS med JavaScript ved hjælp af 'createElement()'-metoden
Hvis du vil oprette klasser eller id'er i JavaScript-styling som i CSS-styling, skal du bruge ' createElement() ” metode. Det bruges til dynamisk at skabe et nyt element. Til styling skab en ' stil ” element ved hjælp af denne metode. Det ' createElement('stil') ”-metoden i JavaScript bruges til dynamisk at skabe et nyt stilelement, som kan bruges til at tilføje CSS-stile til en webside.
Syntaks
Den givne syntaks bruges til ' createElement() ” metode:
For at tilføje CSS-stil i JavaScript skal du bruge den givne syntaks:
konst stil = dokument. skabeElement ( 'stil' ) ;Tilføj derefter stilelementet i head-tagget ved hjælp af nedenstående syntaks:
dokument. hoved . vedhæfteBarn ( stil ) ;Her, ' stil ' er en reference til det nyoprettede stilelement, og ' dokument.hoved ” er hovedelementet i HTML-dokumentet.
Eksempel
Først skal du oprette et stilelement ved hjælp af ' createElement() ” metode:
Opret nu en ' btn ' klasse for at anvende den samme stil på alle knapper og id'er ' btn1 ', ' btn2 ' og ' btn3 ” til individuel knapstyling:
stil. indreHTML = `. btn {
skrifttype - størrelse : 1,1 rem ;
polstring : 3 px ;
margen : 2px ;
skrifttype - familie : uden - serif ;
grænse - radius : .5rem ;
}
#btn1 {
baggrund - farve : grøn ;
farve : hvid ;
}
#btn2 {
baggrund - farve : rød ;
farve : hvid ;
}
#btn3 {
baggrund - farve : gul ;
}
` ;
Føj nu stilelementet til dokumentets hoved ved at overføre som en parameter til ' appendChild() ” metode:
dokument. hoved . vedhæfteBarn ( stil ) ; Produktion
Det handler om at tilføje CSS i JavaScript.
Konklusion
For at tilføje CSS med JavaScript skal du bruge den inline-styling, herunder ' stil 'Ejendom og' setAttribute() '-metoden eller den globale styling ved hjælp af ' createElement() ” metode. Global styling er mere effektiv, mens en inline-metode ikke anbefales, da det gør det vanskeligt at opretholde applikationsstilene og kan føre til gentagelse af kode. Denne artikel beskrev metoderne til at tilføje CSS med JavaScript.