Denne artikkelen vil beskrive metodene for å legge til CSS med JavaScript.
Hvordan legge til CSS med JavaScript?
I JavaScript kan du legge til CSS-stiler til et element ved å endre stilegenskapen ved å bruke følgende metoder eller tilnærminger:
- stil Eiendom som inline styling
- setAttribute() Metode som innebygd styling
- createElement()-metoden som en global styling
Metode 1: Legg til CSS med JavaScript ved å bruke 'stil'-egenskapen
For å legge til CSS i JavaScript, bruk ' stil ' eiendom. Den brukes til å få tilgang til og manipulere de innebygde stilene til et element. Det gir et objekt som representerer de innebygde stilene til et element og lar en hente 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 eksempelet vil vi style knappene med JavaScript. For det første vil vi lage tre knapper og tilordne IDer til dem, noe som hjelper deg med å få tilgang til knappeelementene for styling:
< knappen ID = 'btn2' > Avvis knapp >
< knappen ID = 'btn3' > Aksepterer knapp >
Før styling vil utgangen se slik ut:
La oss nå style disse knappene i JavaScript ved å bruke ' stil ' eiendom. Først, få alle knappeelementene ved å bruke deres tilordnede IDer ved hjelp av ' getElementById() ' metode:
la være enig = dokument. getElementById ( 'btn1' ) ;la avvise = dokument. getElementById ( 'btn2' ) ;
la akseptere = dokument. getElementById ( 'btn3' ) ;
Still inn bakgrunnsfargene til alle disse knappene ved å bruke ' stil ' eiendom:
bli enige. stil . bakgrunnsfarge = 'grønn' ;avvise. stil . bakgrunnsfarge = 'rød' ;
aksepterer. stil . bakgrunnsfarge = 'gul' ;
Som du kan se, har knappene blitt stylet med ' stil ' eiendom:
Metode 2: Legg til CSS med JavaScript ved å bruke 'setAttribute()'-metoden
For å legge til CSS-stil i JavaScript, bruk ' setAttribute() 'metoden. Den brukes til å angi eller legge til et attributt og dets verdi til et HTML-element.
Syntaks
Følgende syntaks brukes for ' setAttribute() ' metode:
Eksempel
Her vil vi sette de forskjellige stilene på knappene i JavaScript ved å bruke ' setAttribute() 'metoden. Sett kantradiusen til alle knappene til ' .5rem ', og tekstfargen til ' Bli enige ' og ' Avvis '-knappene til ' hvit '.
avvise. setAttribute ( 'stil' , 'bakgrunnsfarge: rød; farge: hvit; kantradius: .5rem;' ) ;
aksepterer. setAttribute ( 'stil' , 'bakgrunnsfarge: gul; kantradius: .5rem;' ) ;
Produksjon
Metode 3: Legg til CSS med JavaScript ved å bruke 'createElement()'-metoden
Hvis du vil lage klasser eller IDer i JavaScript-styling som i CSS-styling, bruk ' createElement() 'metoden. Den brukes til å dynamisk lage et nytt element. For styling lag en ' stil '-element ved å bruke denne metoden. « createElement('stil') ”-metoden i JavaScript brukes til å dynamisk lage et nytt stilelement, som kan brukes til å legge til CSS-stiler på en nettside.
Syntaks
Den gitte syntaksen brukes for ' createElement() ' metode:
For å legge til CSS-stil i JavaScript, bruk den gitte syntaksen:
konst stil = dokument. oppretteElement ( 'stil' ) ;Legg deretter til stilelementet i head-taggen ved å bruke syntaksen nedenfor:
dokument. hode . vedleggChild ( stil ) ;Her, ' stil ' er en referanse til det nyopprettede stilelementet, og ' document.head ” er hovedelementet i HTML-dokumentet.
Eksempel
Lag først et stilelement ved å bruke ' createElement() ' metode:
Lag nå en ' btn ' klasse for å bruke samme stil på alle knapper og id ' btn1 ', ' btn2 ' og ' btn3 ' for individuell knappstiling:
stil. indreHTML = `. btn {
font - størrelse : 1,1 rem ;
polstring : 3 px ;
margin : 2px ;
font - familie : uten - serif ;
grense - radius : .5rem ;
}
#btn1 {
bakgrunn - farge : grønn ;
farge : hvit ;
}
#btn2 {
bakgrunn - farge : rød ;
farge : hvit ;
}
#btn3 {
bakgrunn - farge : gul ;
}
` ;
Legg nå til stilelementet til hodet på dokumentet ved å sende som en parameter til ' appendChild() ' metode:
dokument. hode . vedleggChild ( stil ) ; Produksjon
Det handler om å legge til CSS i JavaScript.
Konklusjon
For å legge til CSS med JavaScript, bruk den innebygde stylingen inkludert ' stil ' Eiendom og ' setAttribute() '-metoden, eller den globale stylingen ved å bruke ' createElement() 'metoden. Global styling er mer effektiv mens en inline-metode ikke anbefales, da det gjør det vanskelig å opprettholde stilene for påføring og kan føre til kodegjentakelse. Denne artikkelen beskrev metodene for å legge til CSS med JavaScript.