Come cambiare CSS con JavaScript

La lingua HTML è semplicemente un linguaggio di markup che non può svolgere alcuna funzione e non può eseguire codici basati su vari eventi dinamici. A tale scopo, dobbiamo usare JavaScript per cambiare lo stile CSS di qualsiasi elemento HTML poiché HTML non può farlo da solo.

Ci possono essere vari motivi per cui dobbiamo cambiare CSS e manipolare con elementi HTML, potrebbe essere caricare in modo dinamico il foglio di stile, per cambiare il colore di un pulsante quando un utente lo fa clic o per scrivere CSS in JavaScript. Tutte queste modifiche possono essere fatte tramite JavaScript. In questo articolo vedremo vari modi di accedere a CSS con JavaScript e cambiarlo.

Utilizzo di JavaScript per cambiare CSS

Esistono vari metodi in JavaScript che aiutano ad accedere agli elementi HTML e attraverso ciò possiamo manipolare i valori di CSS. Alcuni di questi metodi sono spiegati di seguito insieme agli esempi.

Utilizzo di getElementsByClassName ()

Il metodo getElementByClassName () Assegna una stringa come nome di classe e cerca l'intero documento HTML e restituisce gli elementi con lo stesso nome di classe. Una volta identificato il nome della classe, possiamo modificare le proprietà CSS come mostrato di seguito nell'esempio:

Html:

Casella di input:


Cambia il confine

JavaScript:

Qui abbiamo cercato l'elemento HTML per nome di classe e modificato le proprietà CSS di quegli elementi usando stile.colore di sfondo E stile.colore del bordo.

Produzione:

Utilizzo di getElementById ()

Un altro metodo da usare è getElementById () che cerca tutti gli elementi HTML con ID simili ed esegue la funzione assegnata su di essi. Vengono utilizzati per lo più vari div che sono assegnati con ID e questi ID vengono cercati usando questo metodo. Questo è i metodi più utilizzati dagli sviluppatori, di seguito è un esempio:

Html:

Casella di input:


Cambia il confine

JavaScript:

Qui abbiamo usato il metodo per cercare tutti gli elementi usando il loro ID e modificato le proprietà CSS usando lo stile.

Produzione:

Utilizzo di QuerySelector ()

Un altro metodo che funziona proprio come i due metodi sopra è il QuerySelector () Metodo che può cercare per nome della classe, nome ID e persino per tag HTML ma restituisce solo il primo elemento HTML menzionato per la ricerca. Di seguito è riportato i modi per utilizzare il queryySelector:

documento.QuerySelector ("# id di div");
documento.QuerySelector (". Nome classe CSS ");
documento.QuerySelector ("Tag HTML come: div>");

Di seguito è riportato un esempio di QuerySelector () e come può essere utilizzato con nome di classe, ID ecc:

Html:

Casella di input:


Cambia il confine

JavaScript:

Qui abbiamo usato il metodo QuerySelector () per cercare classi e ID dei div e abbiamo cambiato le loro proprietà CSS.

Produzione:

Conclusione

Esistono vari motivi per cambiare CSS e il modo migliore per farlo è l'uso di JavaScript in quanto può facilmente accedere agli elementi di HTML e cambiare le loro proprietà CSS. In questo articolo abbiamo discusso di come cambiare CSS usando JavaScript, vari metodi forniti in JavaScript per modificare i valori degli elementi HTML. Questi semplificano il lavoro degli sviluppatori e rendono la pagina web più dinamica. Attraverso questi metodi possiamo modificare i colori dei pulsanti su clic, i colori dello sfondo, i colori del carattere ecc. E manipolare ulteriormente con le proprietà CSS.