addClass y removeClass con JavaScript sin jQuery

Hay veces en que es necesario hacer manipulación de las clases CSS de los elementos HTML, para hacer ciertos efectos sobre ellos entre otras cosas. Generalmente usamos jQuery para realizar el proceso de forma más rápida con las funciones addClass y removeClass.

Pero si solamente deseas usar Javascript evitando uso de librerías, la implentación sería de la siguiente manera:

<script type="text/javascript">
  //Función para verificar si existe una clase
  function existeClase(obj,cls)
  {
	return obj.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
  }
  //Función para agregar una clase, si no existe la clase enviada - agrega la clase.
  function addClass(obj,cls)
  {
   if(!existeClase(obj,cls)) {
    obj.className+=" "+cls;
   }
  }
  //Función para Eliminar una clase
  function removeClass(obj,cls)
  {
   if(existeClase(obj,cls)) {
    var exp =new RegExp('(\s|^)'+cls+'(\s|$)');
    obj.className=obj.className.replace(exp,"");
   }
  }
</script>

Veamos un ejemplo como cambiar el fondo de un div, añadiendo y removiendo las clases.

Creamos las clases en CSS.

<style type="text/css">
  .rojo
  {
    background-color: red;
  }
  .verde {
  background-color: green;
  }
</style>

Cremos los Divs en Html, y hacemos la llamada a las funciones respectivas enviando como argumento a las funciones en este caso el  Objeto HTML pulsado (this) y el nombre de la clase que deseamos agregar o borrar.

<div onclick="addClass(this,'verde');">Pulse para Colorear de Verde</div>

<div class="rojo" onclick="removeClass(this,'rojo');">Pulse para Remover la clase Rojo</div>

Como verán de forma sencilla se ha implementado estas funciones, cualquier consulta por el formulario de comentarios.


ESCRIBE UN COMENTARIO

  1. Muy bueno! Sencillo y elegante.

    Solo un detalle: la función removeClass()no se comporta correctamente cuando la clase que se elimina está entre otras dos, por ejemplo:

    ya que elimina los dos espacios, tanto a derecha como a izquierda, dejando al elemento con un nombre de clase erroneo.
    Por ejemplo al intentar eliminar la clase “clase2” el elemento se quedaría con la clase “clase1clase3”, lo cual es un error:

    Para solucionarlo simplemente hay que eliminar el primer espacio en blanco anterior a la clase que se elimina. Que por notro lado es justamente lo que se aggrega en addClass.

    La línea de código a modificar en la función removeClass() es ésta:


    var exp =new RegExp('(\s|^)'+cls+'(\s|$)');

    que se cambia por ésta:


    var exp =new RegExp('(\s|^)'+cls);

    Saludos!

  2. Alberto Pedron, comentó hace 2 años:

    Ahora es mucho mas sencillo con Element.classList ejemplo de esto

    var boton = document.querySelector(‘button’);

    boton.classList.add(‘myclase’); //Añade la clase

    boton.classList.remove(‘myclase’); //Remueve la clase

    boton.classList.toggle(‘myclase’); //Añade la clase si no la tiene, y si la tiene la remueve

  3. LOL, comentó hace 2 años:

    alert(“solo estaba probando ando”)

  4. Yo, comentó hace 1 año:

    No se dice “remover” , se dice “quitar”!!