Cambiar la clase de un elemento en tiempo de ejecución con javascript

Si estamos acostumbrados a trabajar con hojas de estilos, es posible que el atributo className nos venga muy bien, ya que con definir diferentes clases, en nuestro fichero css podremos gracias a javascript cambiar cualquier elemento con id de nuestro html de clase en tiempo de ejecución.

Para cambiar la case de un elemento deberemos utiliza el siguiente comando

document.getElementById('elemento').className = 'clase'

Donde ‘elemento’ será el identificador y la clase la nueva clase, veamos un ejemplo.

<script>

function cambiarClase(){

document.getElementById('boton1').className = 'clase2'

}

</script>

<input type='button' class='clase1' id='boton1' onclick='cambiarClase()'>

Este ejemplo haría que cuando pulsáramos el botón1 este cambiara su clase, clase1 por la clase, clase2