Ho un elemento che ha già una classe:
``html div class="someclass"; <img ... id="image1" name="image1" />
Ora voglio creare una funzione JavaScript che aggiunga una classe al div
(non sostituire, ma aggiungere).
Come posso farlo?
Aggiungi uno spazio più il nome della tua nuova classe alla proprietà className
dell'elemento. Per prima cosa, metti un id
sull'elemento in modo da poter ottenere facilmente un riferimento.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Poi
var d = document.getElementById("div1");
d.className += " otherclass";
Si noti lo spazio prima di altra classe
. È importante includere lo spazio altrimenti compromette le classi esistenti che la precedono nell'elenco delle classi.
Vedi anche element.className su MDN.
trovate il vostro elemento target "d" come volete e poi:
d.className += ' additionalClass'; //note the space
puoi avvolgerlo in modi più intelligenti per controllare la preesistenza, e controllare i requisiti di spazio ecc.
Supponendo che tu stia facendo più che aggiungere solo questa classe (ad esempio, hai anche richieste asincrone e così via), ti consiglio una libreria come Prototype o jQuery.
Questo renderà praticamente tutto quello che dovrai fare (incluso questo) molto semplice.
Quindi diciamo che hai jQuery nella tua pagina ora, potresti usare un codice come questo per aggiungere un nome di classe ad un elemento (al caricamento, in questo caso):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Controlla il browser jQuery API per altre cose.