Técnicas HTML5 modernas para cambiar de clase
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 la versión 10, aunque hay una imitación para agregar soporte para IE8 e IE9, disponible en esta página . Sin embargo, es cada vez más compatible .
Solución simple de navegador cruzado
Se usa la forma estándar de JavaScript para seleccionar un elemento 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 puede simplemente usarlo this, sin embargo, entrar en detalles al respecto está más allá del alcance de la respuesta
Para cambiar todas las clases para 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 / afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, así:
document.getElementById("MyElement").className += " MyClass";
Para eliminar una clase de un elemento:
Para eliminar una sola clase de un elemento, sin afectar otras clases potenciales, se requiere un simple reemplazo de expresiones regulares:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
Una explicación de esta expresión regular es la siguiente:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
El gindicador le dice al reemplazo que se repita según sea necesario, en caso de que el nombre de la clase se haya agregado varias veces.
Para verificar si una clase ya está aplicada a un elemento:
La misma expresión regular utilizada anteriormente para eliminar una clase también se puede utilizar para verificar 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 onclick="this.className+=' MyClass'"), este no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más mantenible separando el marcado HTML de la lógica de interacción de JavaScript.
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 las etiquetas de script, esto es simplemente por brevedad, 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 en 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 ejecute después de que el HTML haya terminado de cargarse; sin esto, MyElement podría no existir cuando se llama al código JavaScript, por lo que la 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 fijos y casos extremos que quizás no piense al escribir su código.
Si bien algunas personas consideran que es excesivo agregar un marco de trabajo de ~ 50 KB para simplemente cambiar una clase, si está haciendo una cantidad considerable de trabajo de JavaScript, o cualquier cosa que pueda tener un comportamiento inusual entre navegadores, vale la pena considerarlo.
(En términos generales, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene varias bibliotecas y realiza un conjunto completo de tareas).
Los ejemplos anteriores se han reproducido a continuación utilizando jQuery , probablemente la biblioteca JavaScript más utilizada (aunque también hay otros 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í:
$('#MyElement').toggleClass('MyClass');
Asignación de una función a un evento click con jQuery:
$('#MyElement').click(changeClass);
o, sin necesidad de una identificación:
$(':button:contains(My Button)').click(changeClass);