Com afegir CSS amb JavaScript

Hi ha diversos escenaris en què els programadors necessiten estilitzar la pàgina mitjançant JavaScript. Per exemple, canviar dinàmicament l'estil dels elements en les interaccions de l'usuari, incloent mostrar diferents animacions o estils al focus o passar el cursor sobre qualsevol text, etc. Per a l'estil dinàmic, l'ús de l'estil CSS a JavaScript és més eficient. Proporciona una manera flexible i dinàmica de gestionar els estils i fer que les aplicacions siguin més fàcils d'utilitzar.

Aquest article descriurà els mètodes per afegir CSS amb JavaScript.

Com afegir CSS amb JavaScript?

A JavaScript, podeu afegir estils CSS a un element modificant la seva propietat d'estil mitjançant els mètodes o enfocaments següents:

style Propietat com a estil en línia
setAttribute() Mètode com a estil en línia
createElement() Mètode com a estil global

Mètode 1: afegiu CSS amb JavaScript utilitzant la propietat 'style'.

Per afegir CSS a JavaScript, utilitzeu ' estil ' propietat. S'utilitza per accedir i manipular els estils en línia d'un element. Ofereix un objecte que representa els estils en línia d'un element i permet obtenir o establir propietats d'estil individuals.

Sintaxi
Per afegir estil CSS a JavaScript, s'utilitza la sintaxi següent per al ' estil ' propietat:

element. estil ;

Aquí, ' element ” és una referència a un element HTML.

Exemple
En l'exemple següent, estilitzarem els botons amb JavaScript. En primer lloc, crearem tres botons i els assignarem identificadors, cosa que ajuda a accedir als elements del botó per a l'estil:

< identificador del botó = 'btn1' > Acordar botó >
< identificador del botó = 'btn2' > Rebutjar botó >
< identificador del botó = 'btn3' > Acceptar botó >

Abans de dissenyar l'estil, la sortida es veurà així:

Ara, anem a estilitzar aquests botons en JavaScript utilitzant el ' estil ' propietat. Primer, obteniu tots els elements del botó utilitzant els seus identificadors assignats amb l'ajuda del ' getElementById() ” mètode:

deixem estar d'acord = document. getElementById ( 'btn1' ) ;
deixar rebutjar = document. getElementById ( 'btn2' ) ;
deixa acceptar = document. getElementById ( 'btn3' ) ;

Establiu els colors de fons de tots aquests botons utilitzant el ' estil ' propietat:

acordar. estil . color de fons = 'verd' ;
rebutjar. estil . color de fons = 'vermell' ;
acceptar. estil . color de fons = 'groc' ;

Com podeu veure, els botons s'han dissenyat correctament amb el ' estil ' propietat:

Mètode 2: afegiu CSS amb JavaScript mitjançant el mètode 'setAttribute()'.

Per afegir estil CSS a JavaScript, utilitzeu el ' setAttribute() ” mètode. S'utilitza per definir o afegir un atribut i el seu valor a un element HTML.

Sintaxi
La sintaxi següent s'utilitza per a ' setAttribute() ” mètode:

element. setAttribute ( atribut , valor ) ;

Exemple
Aquí, establirem els diferents estils dels botons de JavaScript mitjançant el ' setAttribute() ” mètode. Estableix el radi de la vora de tots els botons a ' .5rem ”, i el color del text del “ Acordar ' i ' Rebutjar botons ' a ' blanc ”.

acordar. setAttribute ( 'estil' , 'color de fons: verd; color: blanc; radi de la vora: .5rem;' ) ;
rebutjar. setAttribute ( 'estil' , 'color de fons: vermell; color: blanc; radi de la vora: .5rem;' ) ;
acceptar. setAttribute ( 'estil' , 'color de fons: groc; radi de la vora: .5rem;' ) ;

Sortida

Mètode 3: afegiu CSS amb JavaScript utilitzant el mètode 'createElement()'.

Si voleu crear classes o identificadors amb l'estil JavaScript com en l'estil CSS, utilitzeu el ' createElement() ” mètode. S'utilitza per crear dinàmicament un nou element. Per dissenyar un estil ' estil ” element utilitzant aquest mètode. El ' createElement('estil') ” en JavaScript s'utilitza per crear dinàmicament un nou element d'estil, que es pot utilitzar per afegir estils CSS a una pàgina web.

Sintaxi
La sintaxi donada s'utilitza per a ' createElement() ” mètode:

document. createElement ( elementType ) ;

Per afegir estil CSS a JavaScript, utilitzeu la sintaxi donada:

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

A continuació, afegiu l'element d'estil a l'etiqueta head utilitzant la sintaxi següent:

document. cap . appendChild ( estil ) ;

Aquí, ' estil ' és una referència a l'element d'estil recent creat i ' document.cap ” és l'element principal del document HTML.

Exemple
Primer, creeu un element d'estil utilitzant el ' createElement() ” mètode:

era estil = document. createElement ( 'estil' ) ;

Ara, crea un ' btn 'classe per aplicar el mateix estil a tots els botons i identificadors' btn1 ”, “ btn2 ' i ' btn3 ” per a l'estil de botons individuals:

estil. innerHTML = `
. btn {
Font - mida : 1.1rem ;
farciment : 3 píxels ;
marge : 2 píxels ;
Font - família : sense - serif ;
frontera - radi : .5rem ;
}
#btn1 {
fons - color : verd ;
color : blanc ;
}
#btn2 {
fons - color : vermell ;
color : blanc ;
}
#btn3 {
fons - color : groc ;
}
` ;

Ara, afegiu l'element d'estil a la capçalera del document passant com a paràmetre al ' appendChild() ” mètode:

document. cap . appendChild ( estil ) ;

Sortida

Això es tracta d'afegir CSS a JavaScript.

Conclusió

Per afegir CSS amb JavaScript, utilitzeu l'estil en línia inclòs el ' estil 'Propietat i' setAttribute() ”, o l'estil global utilitzant el “ createElement() ” mètode. L'estil global és més eficient mentre que no es recomana un mètode en línia, ja que dificulta el manteniment dels estils d'aplicació i pot provocar la repetició del codi. Aquest article descriu els mètodes per afegir CSS amb JavaScript.

Com afegir CSS amb JavaScript