Eu tenho um elemento que já tem uma classe:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
Agora eu quero criar uma função JavaScript que irá adicionar uma classe ao div
(não substituir, mas adicionar).
Como posso fazer isso?
Adicione um espaço mais o nome da sua nova classe à propriedade className
do elemento. Primeiro, coloque um id
no elemento para que você possa facilmente obter uma referência.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Depois
var d = document.getElementById("div1");
d.className += " otherclass";
Note o espaço antes de "outra classe". É importante incluir o espaço, caso contrário compromete as classes existentes que vêm antes dele na lista de classes.
Veja também element.className on MDN.
encontre o seu elemento alvo "d" como desejar e depois:
d.className += ' additionalClass'; //note the space
você pode embrulhar isso de forma mais inteligente para verificar a pré-existência, e verificar a necessidade de espaço, etc.
Assumindo que você está fazendo mais do que apenas adicionar esta classe (por exemplo, você tem pedidos assíncronos e assim por diante também), eu recomendaria uma biblioteca como Prototype ou jQuery.
Isto vai tornar tudo o que você precisa fazer (incluindo isto) muito simples.
Então digamos que você tem jQuery na sua página agora, você poderia usar um código como este para adicionar um nome de classe a um elemento (em carga, neste caso):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Confira o jQuery API browser para outras coisas.