Añadir clases con classList

Ivan Martil

En un artículo anterior vimos como selecionar elementos con javascript y como lanzar eventos. Ahora veremos como añadir, eliminar o comprobar clases en javascript nativo en comparación con jquery.

En jquery disponemos de cuatro métodos para trabajar con clases:

.addClass()
Añadir clases
.hasClass()
Comprobar clase
.removeClass()
Eliminar clase
.toggleClass()
Alternar clase

Nota
No explicaré aqui con detalle las funciones y virtudes de cada método jquery. Si quereis indagar un poco más en la documentación de jquery encontrareis todo lo necesario.

Para ver como funciona la sintaxi imagenemos la estructura html siguiente:


<a class="button__nav" href="#">
 <span>
  Menú
 </span>
</a>

Si nosotros quisieramos añadir una clase a <span> mediante jquery sería algo como $('.button__nav span').addClass('span');.
El asunto es que la mayoria de veces queremos añadir clases en función de la ejecución o no de un evento. Veamos como lo haríamos en jquery.


$('.button__nav').on('click', function(){
  $('.button__nav span').addClass('span');
});


Hasta aquí nada nuevo. Los métodos de jquery son muy comunes y la sintaxi bien sencilla. Pero el objetivo de estos post es buscar métodos nativos de javascript para lograr los mismos resultados.

classList

Bien, llegamos a una api interesante de javascript para manipular las clases de nuestros elementos. Antes de ver como funciona echemos un ojo a su compatibilidad. Volvemos a tener problemas con las diferentes versiones de explorer. En caso de necesitar soporte podemos hacer uso de algún que otro polyfill.

La api de classList nos proporciona diferentes métodos para trabajar con clases.

classList.add(‘claseuno’,’clasedos’)
Añadir clases
classList.remove(‘claseuno’,’clasedos’)
Eliminar clase
classList.contains(‘clase’)
Contiene la clase
classList.toggle(‘claseuno’,true o false)
Alternar clase.

.add() y .remove()

Los métodos .add y .remove tienen una sintaxi muy parecida al .addClass y .removeClass de jquery. La variación viene al añadir multiples clases. Mientras que en jquery se añaden en el mismo entrecomillado en classList debemos entrecomillar cada clase y separarlas por comas.


var btnSpan=document.querySelector('.button__nav span');
btnSpan.classList.add('spaner', 'spanner2');
btnSpan.classList.remove('spaner', 'spanner2');

Veamos como realizar el ejemplo anterior de jquery ,donde añadiamos la clase en función de un evento, con classList.


var btnSpan=document.querySelector('.button__nav span');
function btnEvent(){
 btnSpan.classList.add('span');
}
btnSpan.addEventListener('click',btnEvent,false);

//también podríamos hacerlo como función ananónima
btnSpan.addEventListener('click',function(){
  	btnSpan.classList.toggle('spaner');
  },false);

.contains()

Devuelve true si la clase esta presente y false si no lo esta. Es el equivalente a .hasClass() de jquery.


var btnSpan=document.querySelector('.button__nav span');
function btnContain(){
  if(btnSpan.classList.contains('spaner')){
    console.log('tengo la clase spaner')
  }else{
    console.log('no tengo la clase spaner')
  }
}
btnSpan.addEventListener('click',btnContain,false);

.toggle()

Ha diferencia de los otros métodos toggle admite un segundo parámetro opcional. En el primer parámetro añadimos la clase que queremos alternar. Si esta existe la elimina y devuelve false. Si no existe la añade y devuelve true. Con el segundo parámetro podemos forzar el añadir o eliminar la clase. Si el valor es true la clase se añade pero no se elimina y en false la clase se elimina pero no se añade


var btnSpan=document.querySelector('.button__nav span');
//alterna entre añadir y eliminar la clase
btnSpan.classList.toggle('spaner');
//Añade la clase pero no la elimina
btnSpan.classList.toggle('spaner', true);
//Elimina la clase pero no la añade
btnSpan.classList.toggle('spaner', false);

La sintaxi de classlist() se asemeja mucho a la de jquery. Para los que estemos familiarizados con los métodos de jquery es bastante natural. Ya hemos visto como seleccionar elementos del dom, cómo lanzar eventos y cómo manipular clases con javascript nativo. Estamos listo para crear el menú de esta web con css y javascript nativo. Pero eso, sera otro dia.

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.