Den här artikeln kommer att beskriva metoderna för att lägga till CSS med JavaScript.
Hur lägger man till CSS med JavaScript?
I JavaScript kan du lägga till CSS-stilar till ett element genom att ändra dess stilegenskap med följande metoder eller tillvägagångssätt:
- stil Fastighet som inline styling
- setAttribute() Metod som inline styling
- createElement()-metoden som en global styling
Metod 1: Lägg till CSS med JavaScript med hjälp av 'style'-egenskapen
För att lägga till CSS i JavaScript, använd ' stil ' fast egendom. Den används för att komma åt och manipulera de inline-stilar för ett element. Det ger ett objekt som representerar de inline-stilar för ett element och låter en få eller ställa in individuella stilegenskaper.
Syntax
För att lägga till CSS-stil i JavaScript, används följande syntax för ' stil ' fast egendom:
element. stil ;
Här, ' element ” är en referens till ett HTML-element.
Exempel
I följande exempel kommer vi att utforma knapparna med JavaScript. Först kommer vi att skapa tre knappar och tilldela id till dem, vilket hjälper till att komma åt knappelementen för styling:
< knapp-id = 'btn2' > Avvisa knapp >
< knapp-id = 'btn3' > Acceptera knapp >
Innan du stylar kommer utgången att se ut så här:
Låt oss nu utforma dessa knappar i JavaScript med hjälp av ' stil ' fast egendom. Skaffa först alla knappelement med deras tilldelade ID med hjälp av ' getElementById() ' metod:
låt komma överens = dokumentera. getElementById ( 'btn1' ) ;låt avvisa = dokumentera. getElementById ( 'btn2' ) ;
låt acceptera = dokumentera. getElementById ( 'btn3' ) ;
Ställ in bakgrundsfärgerna för alla dessa knappar med ' stil ' fast egendom:
hålla med. stil . bakgrundsfärg = 'grön' ;avvisa. stil . bakgrundsfärg = 'röd' ;
acceptera. stil . bakgrundsfärg = 'gul' ;
Som du kan se har knapparna formaterats framgångsrikt med hjälp av ' stil ' fast egendom:
Metod 2: Lägg till CSS med JavaScript med metoden 'setAttribute()'.
För att lägga till CSS-stil i JavaScript, använd ' setAttribute() 'metoden. Det används för att ställa in eller lägga till ett attribut och dess värde till ett HTML-element.
Syntax
Följande syntax används för ' setAttribute() ' metod:
Exempel
Här kommer vi att ställa in de olika stilarna på knapparna i JavaScript med hjälp av ' setAttribute() 'metoden. Ställ in ramradien för alla knappar till ' .5rem ', och textfärgen för ' Hålla med ' och ' Avvisa '-knappar till ' vit ”.
avvisa. setAttribute ( 'stil' , 'bakgrundsfärg: röd; färg: vit; kantradius: .5rem;' ) ;
acceptera. setAttribute ( 'stil' , 'bakgrundsfärg: gul; kant-radie: .5rem;' ) ;
Produktion
Metod 3: Lägg till CSS med JavaScript med hjälp av metoden 'createElement()'.
Om du vill skapa klasser eller ID i JavaScript-stil som i CSS-stilen, använd ' createElement() 'metoden. Den används för att dynamiskt skapa ett nytt element. För styling skapa en ' stil ' element med denna metod. den ' skapaElement('stil') ”-metoden i JavaScript används för att dynamiskt skapa ett nytt stilelement, som kan användas för att lägga till CSS-stilar till en webbsida.
Syntax
Den givna syntaxen används för ' createElement() ' metod:
För att lägga till CSS-stil i JavaScript, använd den givna syntaxen:
konst stil = dokumentera. skapaElement ( 'stil' ) ;Lägg sedan till stilelementet i head-taggen med hjälp av nedanstående syntax:
dokumentera. huvud . appendChild ( stil ) ;Här, ' stil ' är en referens till det nyskapade stilelementet, och ' document.head ” är huvudelementet i HTML-dokumentet.
Exempel
Skapa först ett stilelement med hjälp av ' createElement() ' metod:
Skapa nu en ' btn ”-klass för att applicera samma stil på alla knappar och id” btn1 ”, “ btn2 ' och ' btn3 ” för individuell knappstil:
stil. innerHTML = `. btn {
font - storlek : 1,1 rem ;
stoppning : 3 px ;
marginal : 2px ;
font - familj : utan - serif ;
gräns - radie : .5rem ;
}
#btn1 {
bakgrund - Färg : grön ;
Färg : vit ;
}
#btn2 {
bakgrund - Färg : röd ;
Färg : vit ;
}
#btn3 {
bakgrund - Färg : gul ;
}
` ;
Lägg nu till stilelementet till dokumentets huvud genom att skicka som en parameter till ' appendChild() ' metod:
dokumentera. huvud . appendChild ( stil ) ; Produktion
Det handlar om att lägga till CSS i JavaScript.
Slutsats
För att lägga till CSS med JavaScript, använd inline-stilen inklusive ' stil ' Egendom och ' setAttribute() ”-metoden, eller den globala stylingen med hjälp av ” createElement() 'metoden. Global styling är effektivare medan en inline-metod inte rekommenderas eftersom det gör det svårt att upprätthålla appliceringsstilarna och kan leda till kodupprepning. Den här artikeln beskrev metoderna för att lägga till CSS med JavaScript.