Come modificare le classi CSS in JavaScript

Qualsiasi sviluppatore web inizia il loro viaggio imparando HTML, CSS e JavaScript. HTML fornisce struttura alle nostre pagine Web, JavaScript è un linguaggio di programmazione Web che ci dà la possibilità di interagire con gli utenti mentre CSS ci offre la possibilità di modellare le nostre applicazioni Web e le nostre pagine Web. Per manipolare e lavorare con le classi CSS, JavaScript ci offre classlist E nome della classe Proprietà che possono essere utilizzate per manipolare l'attributo di classe.

Il nome della classe può essere utilizzato da JavaScript per manipolare l'elemento specificato mentre CSS utilizza quel nome di classe per modellare quell'elemento. Quindi, in questo post, esamineremo come modificare le classi CSS in JavaScript, ma prima ci permettiamo di impostare l'ambiente inizializzando gli elementi in HTML e quindi styling quell'elemento in CSS.

Ambiente impostato

Creiamo un elemento div che funzioni come un contenitore e posizioniamo due elementi all'interno di questo contenitore. Uno sarà il H2 tag e l'altro sarà il P etichetta. Per collegare il file CSS a questo HTML abbiamo inserito a collegamento Tag nella testa e ha fatto riferimento al nostro file CSS all'interno dell'attributo HREF (stile.CSS)

Inghilterra

La capitale dell'Inghilterra è Londra

Per ottenere il riferimento del div Elemento all'interno di CSS, abbiamo usato l'attributo di classe. Abbiamo eseguito un po 'di styling sul contenitore Div e sugli elementi all'interno del contenitore Div.

.contenitore
Background-color: RGB (54, 224, 207);

.ContainerH2, p
Colore: RGB (125, 104, 184);

L'output sembrerà così:

Modifica le classi CSS

Come menzionato nella parte introduttiva di questo articolo, JavaScript ci offre classlist E nome della classe Proprietà che possono essere utilizzate per manipolare l'attributo di classe.IL nome della classe viene utilizzato per impostare un valore su una classe direttamente mentre usando la proprietà classlist possiamo eseguire le seguenti funzioni:

• classlist.aggiungere() viene utilizzato per aggiungere valori di classe
• classlist.attivare () viene utilizzato per accendere o fuori una classe
• classlist.sostituire() viene utilizzato per sostituire un valore di classe con un altro valore di classe
• classlist.contiene () viene utilizzato per verificare se esiste o meno un valore
• classlist.rimuovere() viene utilizzato per rimuovere un valore di classe

Facciamo un esempio per comprendere meglio la proprietà della classe e i suoi metodi integrati e useremo lo stesso codice HTML e CSS che abbiamo usato in precedenza. Innanzitutto, utilizziamo la proprietà ClassName per assegnare una classe al H2 attributo. A tale scopo abbiamo fatto riferimento a una classe in CSS che al momento non esiste e gli diamo un po 'di stile mostrato di seguito:

.informazioni
Background-color: bianco;
Bordo: 2px Black solido;

Successivamente, ottieni il riferimento del H2 elemento usando il QuerySelector ('H2') che selezionerà il primo elemento H2 nel codice HTML. Quindi, utilizzare la proprietà ClassName per assegnare il informazioni Classe per l'elemento H2. Il codice JavaScript è riportato di seguito:

// Seleziona il primo elemento H2
const myh2 = documento.QuerySelector ('H2');
// Imposta la classe di informazioni su MyH2
myh2.className = 'info';

Per fare riferimento a questo codice JavaScript utilizzare il tag script con l'attributo SRC nel codice HTML che fornisce il nome del file JavaScript nell'attributo SRC:

IL codice.js è il nostro nome del file JavaScript. La nostra pagina web ora avrà un aspetto così:

Modifichiamo ora le classi CSS usando il classlist proprietà. Come visto in precedenza, la proprietà ClassList ci offre alcuni metodi integrati che possiamo utilizzare per modificare le classi CSS. Useremo il classlist.aggiungere() che aggiungerà una classe nel seguente esempio:

// Seleziona il primo div
const hidediv = documento.QuerySelector ('Div');
hidediv.classlist.Aggiungi ("nascosto"); // Classe nascosta aggiunta

Quindi, vai al file CSS e inizializza la classe nascosta rendendo il display nessuno in modo che il div non sia visibile:

.nascosto
visualizzazione: nessuno;

Ora vedrai che l'elemento Div sarà nascosto e non vedrai nulla sulla tua pagina web:

Usiamo ora il classlist.sostituire() Metodo in cui sostituiremo la classe nascosta esistente con un'altra fascia di classe.

// Seleziona il primo div
const hidediv = documento.QuerySelector ('Div');
hidediv.classlist.Aggiungi ("nascosto"); // Classe nascosta aggiunta
hidediv.classlist.sostituire ('nascosto', 'avvolgimento'); // Sostituisci la classe nascosta con la classe di informazioni

Quindi, vai al tuo file CSS e modella la classe Wrap:

.avvolgere
Font-size: grande;

Ora vedrai che il nostro contenuto è ora visibile e la dimensione del carattere sarà più grande di prima:

Conclusione

JavaScript ci offre due proprietà che possiamo utilizzare per modificare le classi CSS; classlist E nome della classe proprietà. IL nome della classe la proprietà viene utilizzata per impostare un valore su una classe CSS direttamente mentre il classlist ci dà alcuni metodi integrati per manipolare le classi CSS.

Ad esempio, il classlist.aggiungere() ci dà la possibilità di aggiungere valori di classe, classlist.rimuovere() ci dà la possibilità di rimuovere una classe, classlist.attivare () ci dà la possibilità di aggiungere attivati ​​a una classe e classlist.sostituire() ci dà la possibilità di sostituire un valore di classe con un'altra classe.

In questo post, abbiamo visto come modificare le classi CSS usando JavaScript imparando due proprietà di JavaScript; classlist E nome della classe.