Moderne tecniche HTML5 per cambiare classe
I browser moderni hanno aggiunto classList che fornisce metodi per semplificare la manipolazione delle classi senza la necessità di una libreria:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
Sfortunatamente, questi non funzionano in Internet Explorer prima della v10, anche se esiste uno shim per aggiungere supporto a IE8 e IE9, disponibili da questa pagina . Tuttavia, sta diventando sempre più supportato .
Semplice soluzione cross-browser
Sta usando il modo JavaScript standard per selezionare un elemento document.getElementById("Id"), che è quello che usano i seguenti esempi - puoi ovviamente ottenere elementi in altri modi, e nella giusta situazione puoi semplicemente usare thisinvece - entrare in dettaglio su questo è al di là dell'ambito della risposta.
Per modificare tutte le classi per un elemento:
Per sostituire tutte le classi esistenti con una o più nuove classi, imposta l'attributo className:
document.getElementById("MyElement").className = "MyClass";
(È possibile utilizzare un elenco delimitato da spazi per applicare più classi.)
Per aggiungere una classe aggiuntiva a un elemento:
Per aggiungere una classe a un elemento, senza rimuovere / influire sui valori esistenti, aggiungi uno spazio e il nuovo nome classe, in questo modo:
document.getElementById("MyElement").className += " MyClass";
Per rimuovere una classe da un elemento:
Per rimuovere una singola classe in un elemento, senza influire su altre potenziali classi, è necessaria una semplice sostituzione regex:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
Una spiegazione di questa regex è la seguente:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
Il gflag indica al sostituto di ripetere come richiesto, nel caso in cui il nome della classe sia stato aggiunto più volte.
Per verificare se una classe è già applicata a un elemento:
Lo stesso regex usato sopra per la rimozione di una classe può anche essere usato come controllo dell'esistenza di una determinata classe:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Assegnando queste azioni agli eventi onclick:
Sebbene sia possibile scrivere JavaScript direttamente all'interno degli attributi dell'evento HTML (come onclick="this.className+=' MyClass'"), questo non è un comportamento raccomandato. Soprattutto su applicazioni più grandi, si ottiene un codice più gestibile separando il markup HTML dalla logica di interazione JavaScript.
Il primo passo per raggiungere questo obiettivo è creare una funzione e chiamare la funzione nell'attributo onclick, ad esempio:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(Non è necessario avere questo codice nei tag di script, questo è semplicemente per brevità di esempio, e includere JavaScript in un file distinto potrebbe essere più appropriato.)
Il secondo passo è spostare l'evento onclick fuori dall'HTML e in JavaScript, ad esempio usando addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Si noti che la parte window.onload è necessaria in modo che il contenuto di quella funzione venga eseguito dopo che il caricamento del codice HTML è terminato - senza questo, MyElement potrebbe non esistere quando viene chiamato il codice JavaScript, quindi quella riga non avrebbe esito positivo.)
Framework e librerie JavaScript
Il codice sopra è tutto in JavaScript standard, tuttavia è pratica comune utilizzare un framework o una libreria per semplificare le attività comuni, oltre a beneficiare di bug fissi e casi limite che potresti non pensare quando scrivi il tuo codice.
Mentre alcune persone considerano eccessivo l'aggiunta di un framework di ~ 50 KB per la semplice modifica di una classe, se si sta eseguendo una quantità sostanziale di lavoro JavaScript o qualcosa che potrebbe avere un comportamento insolito tra i browser, vale la pena prendere in considerazione.
(Molto approssimativamente, una libreria è un insieme di strumenti progettati per un'attività specifica, mentre un framework generalmente contiene più librerie ed esegue una serie completa di compiti.)
Gli esempi sopra sono stati riprodotti di seguito usando jQuery , probabilmente la libreria JavaScript più comunemente usata (anche se ce ne sono altri che vale la pena indagare).
(Nota che $qui è l'oggetto jQuery.)
Modifica delle classi con jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
Inoltre, jQuery fornisce un collegamento per aggiungere una classe se non si applica o rimuovere una classe che fa:
$('#MyElement').toggleClass('MyClass');
Assegnare una funzione a un evento click con jQuery:
$('#MyElement').click(changeClass);
o, senza bisogno di un ID:
$(':button:contains(My Button)').click(changeClass);