Como cambiar la clase de un elemento html con jquery

Para poder cambiar la clase que tiene un div u otro elemento con jquery, lo que hacemos es acceder a ese elemento como lo hacemos siempre con jquery y despues con addClass añadimos la clase que queramos $(‘#capa-variable’).addClass(‘tipo1’);.

tambien tenemos .removeClass(‘tipo1’), que lo que nos hace es quitarnos la clase del elemento si este la tiene $(‘#capa-variable’).removeClass(‘tipo1’);. Como un elemento puede tener mas de una clase, es conveniente quitar la que tenga.

por ultimo, con $(“capa-variable”).hasClass(‘tipo’) podemos ver si un elemento tiene esa clase o no la tiene, esto nos devuelve true o false.

<codigo>
  1. <style>
  2. .tipo1 {
  3.     background-color: red;
  4.     font-size: 20px;
  5.     height: 100px;
  6.     margin: 10px;
  7.     text-align: center;
  8.     width: 598px;
  9. }
  10. .tipo2{
  11.     background-color: grey;
  12.     font-size: 40px;
  13.     height: 100px;
  14.     margin: 10px;
  15.     text-align: center;
  16.     width: 500px;
  17. }
  18. </style>
  19.  
  20. <script>
  21. function CambiarEstilo() {
  22.     if ($('#capa-variable').hasClass('tipo1')){
  23.       $('#capa-variable').addClass('tipo2');
  24.       $('#capa-variable').removeClass('tipo1');
  25.     }else {
  26.       $('#capa-variable').removeClass('tipo2');
  27.       $('#capa-variable').addClass('tipo1');
  28.     }
  29. }
  30. </script>
  31.  
  32. <div id="botones">
  33.     <input class="boton" type="button" onclick="javascript:CambiarEstilo();" value="Cambiar estilo" />
  34. </div>
  35. <div id="capa-variable" class="tipo1">esto es una capa</div>

esto es una capa