Come si aggiunge CSS con JavaScript

Esistono vari scenari quando i programmatori devono modellare la pagina usando JavaScript. Ad esempio, modificando dinamicamente lo stile degli elementi sulle interazioni dell'utente, incluso mostrare animazioni o stili diversi sulla messa a fuoco o in bilico su qualsiasi testo e così via. Per lo stile dinamico, l'uso dello stile CSS in JavaScript è più efficiente. Fornisce un modo flessibile e dinamico per gestire gli stili e rendere le applicazioni più intuitive.

Questo articolo descriverà i metodi per aggiungere CSS con JavaScript.

Come aggiungere CSS con JavaScript?

In JavaScript, è possibile aggiungere stili CSS a un elemento modificando la sua proprietà di stile usando i seguenti metodi o approcci:

• Proprietà in stile come stile in linea
• Metodo setAttribute () come stile in linea
• Metodo createElement () come uno stile globale

Metodo 1: Aggiungi CSS con JavaScript usando la proprietà "Style"

Per l'aggiunta di CSS in JavaScript, usa il “stile" proprietà. Viene utilizzato per accedere e manipolare gli stili in linea di un elemento. Fornisce un oggetto che rappresenta gli stili in linea di un elemento e consente di ottenere o impostare proprietà di stile individuale.

Sintassi
Per l'aggiunta dello stile CSS in JavaScript, la seguente sintassi viene utilizzata per "stile" proprietà:

elemento.stile;

Qui, "elemento"È un riferimento a un elemento HTML.

Esempio
Nel seguente esempio, modelleremo i pulsanti usando JavaScript. In primo luogo, creeremo tre pulsanti e assegneremo loro ID, il che aiuta ad accedere agli elementi dei pulsanti per lo styling:

Essere d'accordo
Rifiutare
Accettare

Prima di styling, l'output sembrerà così:

Ora, modeliamo questi pulsanti in JavaScript usando il "stile" proprietà. Innanzitutto, ottieni tutti gli elementi dei pulsanti usando i loro ID assegnati con l'aiuto di "getElementById ()" metodo:

Letiamo d'accordo = documento.getElementByID ("BTN1");
Let Reject = Document.getElementByID ("BTN2");
Sia accetta = document.getElementByID ("BTN3");

Imposta i colori di sfondo di tutti questi pulsanti usando "stile" proprietà:

Essere d'accordo.stile.backgroundColor = "Green";
rifiutare.stile.backgroundColor = "rosso";
accettare.stile.backgroundColor = "Yellow";

Come puoi vedere, i pulsanti sono stati disegnati con successo usando il "stile" proprietà:

Metodo 2: Aggiungi CSS con JavaScript usando il metodo "setAttribute ()"

Per aggiungere lo stile CSS in JavaScript, usa il “setAttribute ()" metodo. Viene utilizzato per impostare o aggiungere un attributo e il suo valore a un elemento HTML.

Sintassi
La seguente sintassi viene utilizzata per il "setAttribute ()" metodo:

elemento.setAttribute (attributo, valore);

Esempio
Qui imposteremo i diversi stili sui pulsanti in JavaScript usando "setAttribute ()" metodo. Imposta il raggio del bordo di tutti i pulsanti su ".5rem", E il colore del testo del"Essere d'accordo" E "Rifiutare"Pulsanti a"bianco".

Essere d'accordo.setAttribute ("stile", "-colore di sfondo: verde; colore: bianco; radius bordo: .5rem; ");
rifiutare.setAttribute ("Style", "Colore di sfondo: Red; Colore: White; Border-Radius: .5rem; ");
accettare.setAttribute ("stile", "color background: giallo; raggio di confine: .5rem; ");

Produzione

Metodo 3: Aggiungi CSS con JavaScript usando il metodo "CreateElement ()"

Se si desidera creare classi o ID nello stile JavaScript come nello stile CSS, usa il “createElement ()" metodo. Viene utilizzato per creare dinamicamente un nuovo elemento. Per lo styling crea un "stile"Elemento usando questo metodo. IL "CreateElement ('Style')"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 viene utilizzata per "createElement ()" metodo:

documento.createElement (elementType);

Per l'aggiunta dello stile CSS in JavaScript, utilizzare la sintassi data:

const style = document.createElement ('Style');

Quindi aggiungere l'elemento di stile nel tag Head utilizzando la sintassi seguente:

documento.Testa.appendChild (stile);

Qui, "stile"È un riferimento all'elemento di stile appena creato e"documento.Testa"È l'elemento principale del documento HTML.

Esempio
Innanzitutto, crea un elemento di stile usando "createElement ()" metodo:

var style = document.createElement ('Style');

Ora, crea un "btn"Classe per applicare lo stesso stile su tutti i pulsanti e gli ID"btn1","btn2" E "btn3"Per lo stile dei pulsanti individuali:

stile.InnerHtml = '
.btn
Font-Size: 1.1rem;
imbottitura: 3px;
Margine: 2px;
Font-Family: sans-serif;
raggio di confine: .5rem;

#btn1
Background-color: verde;
colore bianco;

#btn2
Background-color: rosso;
colore bianco;

#btn3
Background-color: giallo;

';

Ora, aggiungi l'elemento di stile alla testa del documento passando come parametro al "appendChild ()" metodo:

documento.Testa.appendChild (stile);

Produzione

Si tratta di aggiungere CSS in JavaScript.

Conclusione

Per l'aggiunta di CSS con JavaScript, utilizzare lo stile in linea tra cui il "stile"Proprietà", e "setAttribute ()"Metodo o lo stile globale usando il"createElement ()" metodo. Lo stile globale è più efficiente mentre un metodo in linea non è raccomandato in quanto rende difficile mantenere gli stili di applicazione e può portare alla ripetizione del codice. Questo articolo ha descritto i metodi per aggiungere CSS con JavaScript.