Modificare la classe di un elemento HTML con JavaScript

1. Seleziona un elemento HTML in JavaScript
2. Modifica tutte le classi applicabili a un elemento in JavaScript
3. Inserisci una classe extra nell’elemento in JavaScript
4. Elimina una classe in un elemento in JavaScript
5. Controlla se una classe è stata utilizzata in un elemento in JavaScript

Questo articolo mostra come modificare la classe di un elemento HTML in risposta a eventi JavaScript.

Seleziona un elemento HTML in JavaScript

Indiscutibilmente, il modo più semplice per selezionare un elemento HTML in JavaScript è attraverso document.getElementById().

Ad esempio, se devi selezionare un elemento con l’ID classe Studenti, ecco come selezionarlo.

document.getElementById('Students')

Modifica tutte le classi applicabili a un elemento in JavaScript

Dopo aver selezionato l’elemento utilizzando il suo ID classe, puoi cambiare la sua classe o sostituire tutte le sue classi, come mostrato sopra. Dovrai impostarne uno nuovo utilizzando l’attributo .className per sostituire la vecchia classe, come mostrato di seguito.

Document.getElementById('Fruits').classname = 'Veggies';

Inserisci una classe extra nell’elemento in JavaScript

Puoi anche aggiungere una nuova classe a un elemento senza modificare nessuna delle classi esistenti. Puoi farlo usando l’operatore += per aggiungere la nuova classe.

Per esempio,

Document.getElementById('Subjects').className += 'Physics';

Aggiunge una classe extra denominata Fisica ad altre classi nell’elemento Soggetti.

Elimina una classe in un elemento in JavaScript

L’eliminazione di una singola classe in un elemento senza influire sulle altre classi è leggermente più complessa. Dovrai usare .className.replace insieme alla seguente regex.

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s acquisisce l’inizio di una stringa e/o qualsiasi singolo carattere di spazio vuoto utilizzato.
• RemoveThis è il nome della classe da rimuovere.
• (?!\S) verifica che RemoveThis sia il nome completo di una classe e controlla eventuali caratteri non spazi alla fine. In altre parole, garantisce che la regex sia posizionata alla fine della stringa.
• g è il flag che assicura che il comando di sostituzione venga eseguito come necessario in tutti i casi in cui è stata aggiunta la classe.

Vedi l’esempio sotto.

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

Controlla se una classe è stata utilizzata in un elemento in JavaScript

Per verificare se una classe è stata applicata a un elemento specifico, puoi utilizzare la regex sopra. Ciò si ottiene al meglio usando un if(); dichiarazione per dare un risultato. Per esempio:

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

L’output sarà Class has been used se il controllo risulta positivo, o nessun output se è negativo a meno che un’azione o un output alternativo non sia definito con l’istruzione else.

Non è consigliabile scrivere codice JavaScript direttamente negli attributi dell’evento HTML. Potrebbe rendere più difficile l’esecuzione e rallentare le applicazioni. Invece, puoi scrivere il JavaScript in una funzione, chiamando la suddetta funzione in un attributo onclick e poi spostando l’evento dal codice HTML a JavaScript. Puoi farlo con l’attributo .addEventListener().