Cómo se puede cambiar la clase CSS de un elemento mediante JavaScript

Me gustaría cambiar la clase CSS de un elemento cuando se pincha sobre el. ¿Cómo puedo conseguirlo mediante el evento onclick de JavaScript?

Estás leyendo una traducción autorizada de la pregunta Change an element's CSS class with JavaScript planteada por Nathan Smith en StackOverflow.

Respuestas

Suponiendo que tu código HTML sea el siguiente:

<a id="boton" class="...">Pincha aquí</a>

Si utilizas jQuery en tu aplicación, la solución es muy sencilla:

$('#boton').click(cambiarClase);
 
function cambiarClase()
{
    // cambiar la clase CSS aquí
}

Como no dices qué es lo que quieres cambiar exactamente en la clase CSS del elemento, estas son algunas de las opciones que tienes:

// añadir una clase al elemento
$('#boton').addClass('nueva_clase');
 
// eliminar una clase del elemento
$('#boton').removeClass('clase_existente');
 
// comprobar si el elemento tiene una clase
if ( $('#boton').hasClass('clase_buscada') ) { ... }
 
// añadir clase si no existía o eliminar clase si ya existía
$('#boton').toggleClass('clase_a_comprobar');

Si utilizas un navegador moderno que soporte HTML5, puedes utilizar la propiedad classList de JavaScript que permite manipulaciones similares a las que proporciona jQuery:

// añadir una clase
document.getElementById("boton").classList.add('clase_css');
 
// eliminar la clase indicada
document.getElementById("boton").classList.remove('clase_css');
 
// comprobar si el elemento contiene esa clase
if ( document.getElementById("boton").classList.contains('clase_css') )
 
// añadir clase si no existía; eliminarla si ya existía
document.getElementById("boton").classList.toggle('clase_css');

Si no puedes utilizar ni jQuery ni ningún navegador HTML5 moderno, echa un vistazo a las soluciones alternativas que encontrarás en esta página.

@javiereguiluz

7 febrero 2015, 19:41