Los navegadores modernos han agregado classList que proporciona métodos para facilitar la manipulación de clases sin necesidad de una biblioteca:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Desafortunadamente, estos no funcionan en Internet Explorer antes de v10, aunque hay una corrección de compatibilidad para agregar soporte para IE8 e IE9, disponible en esta página. Sin embargo, está recibiendo cada vez más apoyo.

Solución sencilla entre navegadores

La forma estándar de JavaScript para seleccionar un elemento es usar document.getElementById("Id"), que es lo que usan los siguientes ejemplos: por supuesto, puede obtener elementos de otras maneras y, en la situación correcta, simplemente puede usar, sin embargo, entrar en detalles sobre esto está más allá del alcance de la respuesta.this

Para cambiar todas las clases de un elemento:

Para reemplazar todas las clases existentes con una o más clases nuevas, establezca el atributo className:

document.getElementById("MyElement").className = "MyClass";

(Puede usar una lista delimitada por espacios para aplicar varias clases).

Para agregar una clase adicional a un elemento:

Para agregar una clase a un elemento, sin eliminar o afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, así:

document.getElementById("MyElement").className += " MyClass";

Para quitar una clase de un elemento:

Para eliminar una sola clase de un elemento, sin afectar a otras clases potenciales, se requiere un simple reemplazo de regex:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' );

/* Código ajustado para facilitar la legibilidad: arriba está toda una declaración */


// Una explicación rápida de este regex es la siguiente:

(?:^|\s) # Hacer coincidir el inicio de la cadena o cualquier carácter de espacio en blanco

MyClass  # El texto literal del nombre de clase que se va a quitar

(?!\S)   # negativa para verificar que lo anterior es todo el nombre de clase
         # Asegura que no haya ningún carácter que no sea de espacio siguiendo
         # (es decir, debe ser el final de la cadena o espacio)

El indicador indica al reemplazo que se repita según sea necesario, en caso de que el nombre de la clase se haya agregado varias veces.

Para comprobar si una clase ya está aplicada a un elemento:

El mismo regex utilizado anteriormente para eliminar una clase también se puede utilizar como una comprobación de si existe una clase en particular:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

### Asignación de estas acciones a eventos onclick:

Si bien es posible escribir JavaScript directamente dentro de los atributos del evento HTML (como), este no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más fácil de mantener separando el marcado HTML de la lógica de interacción de JavaScript.onclick="this.className+=' MyClass'"

El primer paso para lograr esto es crear una función y llamar a la función en el atributo onclick, por ejemplo:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(No es necesario tener este código en etiquetas de script, esto es simplemente por la brevedad del ejemplo, e incluir el JavaScript en un archivo distinto puede ser más apropiado).

El segundo paso es mover el evento onclick fuera del HTML y a JavaScript, por ejemplo, usando addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener('click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Tenga en cuenta que la parte window.onload es necesaria para que el contenido de esa función se ejecutedespuésde que el HTML haya terminado de cargarse; sin esto, MyElement podría no existir cuando se llama al código JavaScript, por lo que esa línea fallaría).

Marcos y bibliotecas de JavaScript

El código anterior está todo en JavaScript estándar, sin embargo, es una práctica común usar un marco o una biblioteca para simplificar las tareas comunes, así como beneficiarse de errores corregidos y casos extremos en los que quizás no piense al escribir su código.

Si bien algunas personas consideran excesivo agregar un marco de ~ 50 KB para simplemente cambiar una clase, si está haciendo una cantidad sustancial de trabajo de JavaScript o cualquier cosa que pueda tener un comportamiento inusual entre navegadores, vale la pena considerarlo.

(A grandes rasgos, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene múltiples bibliotecas y realiza un conjunto completo de tareas).

Los ejemplos anteriores se han reproducido a continuación usandojQuery, probablemente la biblioteca de JavaScript más utilizada (aunque también hay otras que vale la pena investigar).

(Tenga en cuenta que aquí está el objeto jQuery).$

Cambio de clases con jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Además, jQuery proporciona un acceso directo para agregar una clase si no se aplica, o eliminar una clase que sí lo hace:

$('#MyElement').toggleClass('MyClass');

### Asignar una función a un evento click con jQuery:

$('#MyElement').click(changeClass);

O, sin necesidad de identificación:

$(':button:contains(My Button)').click(changeClass);

Espero que sea mucha utilidad al momento de estar programando y no caer en un limbo o laguna.