Questo articolo descriverà i metodi per aggiungere CSS con JavaScript.
Come aggiungere CSS con JavaScript?
In JavaScript, puoi aggiungere stili CSS a un elemento modificandone la proprietà style utilizzando i seguenti metodi o approcci:
- style Proprietà come stile inline
- setAttribute() Metodo come stile inline
- createElement() come stile globale
Metodo 1: aggiungere CSS con JavaScript utilizzando la proprietà 'style'.
Per aggiungere CSS in JavaScript, utilizzare il ' stile ' proprietà. Viene utilizzato per accedere e manipolare gli stili inline di un elemento. Fornisce un oggetto che rappresenta gli stili incorporati di un elemento e consente di ottenere o impostare proprietà di stile individuali.
Sintassi
Per aggiungere lo stile CSS in JavaScript, viene utilizzata la seguente sintassi per ' stile ' proprietà:
elemento. stile ;
Qui, ' elemento ” è un riferimento a un elemento HTML.
Esempio
Nell'esempio seguente, modelleremo i pulsanti utilizzando JavaScript. In primo luogo, creeremo tre pulsanti e assegneremo loro degli ID, il che aiuta ad accedere agli elementi del pulsante per lo styling:
< ID pulsante = 'btn2' > Rifiutare pulsante >
< ID pulsante = 'btn3' > Accettare pulsante >
Prima di definire lo stile, l'output sarà simile a questo:
Ora, stiliamo questi pulsanti in JavaScript usando il ' stile ' proprietà. Innanzitutto, ottieni tutti gli elementi del pulsante utilizzando i loro ID assegnati con l'aiuto del ' getElementById() ' metodo:
lasciamoci d'accordo = documento. getElementById ( 'btn1' ) ;lasciate rifiutare = documento. getElementById ( 'btn2' ) ;
lascia accettare = documento. getElementById ( 'btn3' ) ;
Imposta i colori di sfondo di tutti questi pulsanti usando il pulsante ' stile ' proprietà:
Essere d'accordo. stile . colore di sfondo = 'verde' ;rifiutare. stile . colore di sfondo = 'rosso' ;
accettare. stile . colore di sfondo = 'giallo' ;
Come puoi vedere, i pulsanti sono stati stilizzati con successo utilizzando il ' stile ' proprietà:
Metodo 2: aggiungere CSS con JavaScript utilizzando il metodo 'setAttribute ()'.
Per aggiungere uno stile CSS in JavaScript, usa il ' impostaAttributo() ' metodo. Viene utilizzato per impostare o aggiungere un attributo e il suo valore a un elemento HTML.
Sintassi
La seguente sintassi è utilizzata per ' impostaAttributo() ' metodo:
Esempio
Qui, imposteremo i diversi stili sui pulsanti in JavaScript usando il ' impostaAttributo() ' metodo. Imposta il raggio del bordo di tutti i pulsanti su ' .5rim ” e il colore del testo del “ Essere d'accordo ' E ' Rifiutare 'pulsanti per' bianco ”.
rifiutare. setAttribute ( 'stile' , 'colore di sfondo: rosso; colore: bianco; raggio del bordo: .5rem;' ) ;
accettare. setAttribute ( 'stile' , 'colore di sfondo: giallo; raggio del bordo: .5rem;' ) ;
Produzione
Metodo 3: aggiungere CSS con JavaScript utilizzando il metodo 'createElement ()'.
Se vuoi creare classi o ID nello stile JavaScript come nello stile CSS, usa il ' creaElemento() ' metodo. Viene utilizzato per creare dinamicamente un nuovo elemento. Per lo styling crea un ' stile ” utilizzando questo metodo. IL ' createElement('stile') Il metodo ” in JavaScript viene utilizzato per creare dinamicamente un nuovo elemento di stile, che può essere utilizzato per aggiungere stili CSS a una pagina web.
Sintassi
La sintassi data è usata per ' creaElemento() ' metodo:
Per aggiungere lo stile CSS in JavaScript, usa la sintassi data:
cost stile = documento. createElement ( 'stile' ) ;Quindi aggiungi l'elemento style nel tag head utilizzando la sintassi seguente:
documento. Testa . appendChild ( stile ) ;Qui, ' stile ' è un riferimento all'elemento di stile appena creato e ' documento.head ” è l'elemento principale del documento HTML.
Esempio
Innanzitutto, crea un elemento di stile utilizzando il ' creaElemento() ' metodo:
Ora, crea un ' btn 'classe per applicare lo stesso stile a tutti i pulsanti e gli ID' btn1 ”, “ btn2 ' E ' btn3 ” per lo stile dei singoli pulsanti:
stile. innerHTML = `. btn {
font - misurare : 1.1rim ;
imbottitura : 3px ;
margine : 2px ;
font - famiglia : senza - serif ;
confine - raggio : .5rim ;
}
#btn1 {
sfondo - colore : verde ;
colore : bianco ;
}
#btn2 {
sfondo - colore : rosso ;
colore : bianco ;
}
#btn3 {
sfondo - colore : giallo ;
}
` ;
Ora, aggiungi l'elemento di stile all'intestazione del documento passando come parametro a ' appendChild() ' metodo:
documento. Testa . appendChild ( stile ) ; Produzione
Si tratta di aggiungere CSS in JavaScript.
Conclusione
Per aggiungere CSS con JavaScript, utilizza lo stile in linea che include ' stile ” Proprietà, e “ impostaAttributo() ” o lo stile globale utilizzando il metodo “ creaElemento() ' metodo. Lo stile globale è più efficiente mentre un metodo inline non è consigliato in quanto rende difficile mantenere gli stili dell'applicazione e può portare alla ripetizione del codice. Questo articolo descrive i metodi per aggiungere CSS con JavaScript.