¿Cómo puedo añadir una clase a un elemento determinado?

Tengo un elemento que ya tiene una clase:

<div class="someclass">
    <img ... id="imagen1" name="imagen1" />
</div>

Ahora quiero crear una función JavaScript que añada una clase al div (no reemplazar, sino añadir).

¿Cómo puedo hacerlo?

Edwin Pratt
Pregunta editada 9º mayo 2019 в 10:31
Programación
javascript dom-manipulation
3º febrero 2009 в 1:54
19 vistas
Solución

Añade un espacio más el nombre de tu nueva clase a la propiedad className del elemento. Primero, pon un id en el elemento para que puedas obtener fácilmente una referencia.

<div id="div1" class="someclass">

</div>

Entonces

var d = document.getElementById("div1");
d.className += " otherclass";

Tenga en cuenta el espacio antes de otherclass. Es importante incluir el espacio, de lo contrario compromete las clases existentes que vienen antes de ella en la lista de clases.

Véase también element.className en MDN.

Sean Ker
Respuesta editada 4º octubre 2019 в 9:27
Comentarios (14)

encontrar su elemento de destino "d" como quiera y luego:

d.className += ' additionalClass'; //note the space

puedes envolver eso en formas más inteligentes para comprobar la preexistencia, y comprobar los requisitos de espacio, etc.

Cœur
Respuesta editada 26º febrero 2017 в 4:29
Comentarios (4)

Asumiendo que está haciendo algo más que añadir esta clase (por ejemplo, tiene peticiones asíncronas y demás), yo recomendaría una librería como Prototype o jQuery.

Esto hará que casi todo lo que necesite hacer (incluyendo esto) sea muy simple.

Así que digamos que tiene jQuery en su página ahora, podría usar código como este para añadir un nombre de clase a un elemento (en la carga, en este caso):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Consulta el navegador de la API de jQuery para otras cosas.

Comentarios (0)