¿Cómo agregar una clase a un elemento determinado?
Tengo un elemento que ya tiene una clase:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
Ahora, quiero crear una función de JavaScript que agregará una clase aldiv (no reemplazará, sino agregará).
¿Cómo puedo hacer eso?
Si solo te diriges a navegadores modernos:
Utilice element.classList.add para agregar una clase:
element.classList.add("my-class");
Y element.classList.remove para eliminar una clase:
element.classList.remove("my-class");
Si necesita compatibilidad con Internet Explorer 9 o inferior:
Agrega un espacio más el nombre de tu nueva clase a la classNamepropiedad del elemento. Primero, coloque una marca iden el elemento para que pueda obtener una referencia fácilmente.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Entonces
var d = document.getElementById("div1");
d.className += " otherclass";
Tenga en cuenta el espacio antes otherclass. Es importante incluir el espacio, de lo contrario comprometerá las clases existentes que le preceden en la lista de clases.
Consulte también element.className en MDN .
La forma más sencilla de hacer esto sin ningún marco es utilizar el método element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");
Editar: Y si desea eliminar la clase de un elemento,
element.classList.remove("otherclass");
Prefiero no tener que agregar ningún espacio vacío ni duplicar la entrada yo mismo (lo cual es necesario cuando se utiliza este document.classNameenfoque). Existen algunas limitaciones del navegador , pero puedes solucionarlas usando polyfills .
