Agregar y eliminar clases en jQuery.



jQuery

Para agregar y eliminar clases en jQuery haremos uso de las funciones .addClass() y .removeClass(), su sintaxis sería de la siguiente manera:

$('elementohtml').addClass('NombreDeClase');
$('elementohtml').removeClass('NombreDeClase');
$('') convierte nuestro elemento html en un objeto jQuery y las funciones .addClass() y .removeClass() agregan a éste elemento html la clase la cual coloquemos como parámetro o argumento.

Un ejemplo de como agregar una clase por ejemplo a un párrafo para cambiar su color de fuente sería:

$(document).ready(function(){
         $('p').addClass('azul');    
});

Ésto suponiendo que tenemos en nuestro css una clase llamada .azul:

.azul { 
color: #0938F0; 
} 

Y si queremos cambiar la clase del párrafo al hacer clic en un botón haríamos lo siguiente:

-Para agregar el botón usaremos la etiqueta de html <button> , su sintaxis sería:

<button type="button">Texto del boton</button>

-Y nuestro botón sería:

<button type="button">Agregar Clase</button>

Nuestro código jQuery para cambiar la clase del párrafo haciendo clic en el botón "Agregar Clase" sería: 

$(document).ready(function(){
    $('button').click(function(){
         $('p').addClass('azul');    
    });
});

Y para quitar una clase haciendo clic en un botón:

$(document).ready(function(){
    $('button').click(function(){
         $('p').removeClass('azul');    
    });
});

En el siguiente ejemplo agregamos una clase a un texto en un div y lo transformamos en un cuadrado, y a un rectángulo le quitamos su clase y lo convertimos en un simple texto:

<!DOCTYPE html>
<html>
    <head>
 <style>
 h2 {
    font-family:arial;
}
 .rectangulo{
 display: inline-block;
 height:150px;
 width:400px;
 background-color:#BB17ED;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 .azul{
 display: inline-block;
 height:200px;
 width:200px;
 background-color:#0938F0;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 </style>
     <title>Agregar y eliminar clases jQuery</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
 <body>
  <h2>Haz clic en los botones para eliminar y agregar las clases</h2>
  <button id="uno" type="button">Agregar Clase</button>
  <button id="dos" type="button">Quitar Clase</button>
  </br>
  <div id="cuadrado">Soy un cuadro</div>
  <div Class="rectangulo">Soy un rectangulo</div>    
 <script>
$(document).ready(function(){
    $('#uno').click(function(){
         $('#cuadrado').addClass('azul');    
    });
     $('#dos').click(function(){
         $('.rectangulo').removeClass('rectangulo');
    });
});
 </script>
 </body>
</html>

Vamos a verlo en acción:



También te podría interesar:
  1. About you objetivo codecademy html y css
  2. HTML - Lista desplegable con enlaces
  3. 60+ Manuales y libros sobre programación para descargar

¡Ayúdanos a seguir creciendo, comparte en tus Redes Sociales!

Siguiente
« Prev Post
Anterior
Next Post »