Hoe voeg je CSS toe met JavaScript

Er zijn verschillende scenario's waarin programmeurs de pagina moeten stylen met behulp van JavaScript. Bijvoorbeeld het dynamisch wijzigen van de stijl van de elementen op gebruikersinteracties, inclusief het tonen van verschillende animaties of stijlen op focus of zweven op tekst, enzovoort. Voor dynamische styling is het gebruik van CSS-styling in JavaScript efficiënter. Het biedt een flexibele en dynamische manier om stijlen te beheren en applicaties gebruiksvriendelijker te maken.

Dit artikel beschrijft de methoden om CSS met JavaScript toe te voegen.

Hoe voeg je CSS toe met JavaScript?

In JavaScript kunt u CSS-stijlen aan een element toevoegen door de stijleigenschap ervan te wijzigen met behulp van de volgende methoden of benaderingen:

style Eigenschap als inline styling
setAttribute() Methode als inline styling
createElement() Methode als globale stijl

Methode 1: CSS toevoegen met JavaScript met behulp van de eigenschap 'style'.

Gebruik voor het toevoegen van CSS in JavaScript de ' stijl ' eigendom. Het wordt gebruikt om toegang te krijgen tot de inline-stijlen van een element en deze te manipuleren. Het geeft een object dat de inline stijlen van een element vertegenwoordigt en stelt iemand in staat om individuele stijleigenschappen op te halen of in te stellen.

Syntaxis
Voor het toevoegen van CSS-stijl in JavaScript wordt de volgende syntaxis gebruikt voor de ' stijl ' eigendom:

element. stijl ;

Hier, ' element ” is een verwijzing naar een HTML-element.

Voorbeeld
In het volgende voorbeeld zullen we de knoppen stylen met behulp van JavaScript. Ten eerste zullen we drie knoppen maken en er id's aan toewijzen, wat helpt om toegang te krijgen tot de knopelementen voor styling:

< knop-id = 'btn1' > Mee eens zijn knop >
< knop-id = 'btn2' > Afwijzen knop >
< knop-id = 'btn3' > Aanvaarden knop >

Voor het stylen ziet de uitvoer er als volgt uit:

Laten we nu deze knoppen in JavaScript stylen met behulp van de ' stijl ' eigendom. Zorg eerst dat alle knopelementen hun toegewezen id's gebruiken met behulp van de ' getElementById() ” methode:

laten we het eens zijn = document. getElementById ( 'btn1' ) ;
laten afwijzen = document. getElementById ( 'btn2' ) ;
laten accepteren = document. getElementById ( 'btn3' ) ;

Stel de achtergrondkleuren van al deze knoppen in met de knop ' stijl ' eigendom:

mee eens zijn. stijl . Achtergrond kleur = 'groente' ;
afwijzen. stijl . Achtergrond kleur = 'rood' ;
aanvaarden. stijl . Achtergrond kleur = 'geel' ;

Zoals u kunt zien, zijn de knoppen met succes gestileerd met behulp van de ' stijl ' eigendom:

Methode 2: voeg CSS toe met JavaScript met behulp van de 'setAttribute()'-methode

Om CSS-stijl in JavaScript toe te voegen, gebruikt u de ' setAttribuut() ” methode. Het wordt gebruikt om een attribuut en zijn waarde in te stellen of toe te voegen aan een HTML-element.

Syntaxis
De volgende syntaxis wordt gebruikt voor de ' setAttribuut() ” methode:

element. setAttribuut ( attribuut , waarde ) ;

Voorbeeld
Hier zullen we de verschillende stijlen op de knoppen in JavaScript instellen met behulp van de ' setAttribuut() ” methode. Stel de randradius van alle knoppen in op ' .5rem ”, en de tekstkleur van de “ Mee eens zijn ' En ' Afwijzen ' knoppen om ' wit ”.

mee eens zijn. setAttribuut ( 'stijl' , 'achtergrondkleur: groen; kleur: wit; grensstraal: .5rem;' ) ;
afwijzen. setAttribuut ( 'stijl' , 'achtergrondkleur: rood; kleur: wit; grensstraal: .5rem;' ) ;
aanvaarden. setAttribuut ( 'stijl' , 'achtergrondkleur: geel; grensstraal: .5rem;' ) ;

Uitgang

Methode 3: voeg CSS toe met JavaScript met behulp van de 'createElement()'-methode

Als u klassen of id's wilt maken in JavaScript-stijl zoals in de CSS-stijl, gebruikt u de ' createElement() ” methode. Het wordt gebruikt om dynamisch een nieuw element te creëren. Maak voor styling een ' stijl ”-element met deze methode. De ' createElement(‘stijl’) ”methode in JavaScript wordt gebruikt om dynamisch een nieuw stijlelement te maken, dat kan worden gebruikt om CSS-stijlen aan een webpagina toe te voegen.

Syntaxis
De gegeven syntaxis wordt gebruikt voor de ' createElement() ” methode:

document. createElement ( elementType ) ;

Gebruik de gegeven syntaxis om CSS-stijl in JavaScript toe te voegen:

const stijl = document. createElement ( 'stijl' ) ;

Voeg vervolgens het stijlelement toe aan de head-tag met behulp van de onderstaande syntaxis:

document. hoofd . appendKind ( stijl ) ;

Hier, ' stijl ” is een verwijzing naar het nieuw gecreëerde stijlelement, en “ document.hoofd ” is het hoofdelement van het HTML-document.

Voorbeeld
Maak eerst een stijlelement met behulp van de ' createElement() ” methode:

was stijl = document. createElement ( 'stijl' ) ;

Maak nu een ' btn ” klasse voor het toepassen van dezelfde styling op alle knoppen en id's “ btn1 ”, “ btn2 ' En ' btn3 ” voor individuele knopstyling:

stijl. binnenHTML = `
. btn {
lettertype - maat : 1.1rem ;
opvulling : 3px ;
marge : 2px ;
lettertype - familie : zonder - schreef ;
grens - straal : .5rem ;
}
#btn1 {
achtergrond - kleur : groente ;
kleur : wit ;
}
#btn2 {
achtergrond - kleur : rood ;
kleur : wit ;
}
#btn3 {
achtergrond - kleur : geel ;
}
` ;

Voeg nu het stijlelement toe aan de kop van het document door als parameter door te geven aan de ' toevoegenKind() ” methode:

document. hoofd . appendKind ( stijl ) ;

Uitgang

Dat gaat allemaal over het toevoegen van CSS in JavaScript.

Conclusie

Gebruik voor het toevoegen van CSS met JavaScript de inline styling inclusief de ' stijl ” Eigendom, en “ setAttribuut() ' methode, of de globale styling met behulp van de ' createElement() ” methode. Globale styling is efficiënter, terwijl een inline-methode niet wordt aanbevolen, omdat dit het moeilijk maakt om de toepassingsstijlen te behouden en kan leiden tot codeherhaling. In dit artikel worden de methoden beschreven om CSS met JavaScript toe te voegen.

Hoe voeg je CSS toe met JavaScript