Cambiar el el valor del atributo class con JavaScript

Cambiar todas las classes con una nueva o más:

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

(Puedes agregar más clases separándolas con un espacio)

Agregar clases adicionales sin afectar las existentes:

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

Eliminar una clase, sin afectar las existentes:

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

Verificar si una clase ya ha sido aplicada a un elemento:

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

Asignar estas acciones a eventos:

<script type="text/javascript">// <![CDATA[
    function changeClass()
    {
        // code examples from above
    }

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

Cambiar clases con JQuery:

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

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

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

jQuery afrece un atajo para aplicar o eliminar una clase, según sea el caso:

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

Asignar una función a un evento onclick jQuery:

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

o sin usar un id:

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

Cambiar clases con HTML5

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

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

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

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