Como cambiar la clase de un elemento html con javascript

Para poder cambiar la clase que tiene un div u otro elemento con javascript, lo que necesitamos es acceder a ese elemento, y lo hacemos con elemento = document.getElementById(“capa”);. Una vez que tenemos el elemento lo que hacemos es cambiarle la clase que tiene con elemento.className = “tipo2”;.

Una vez que tenemos el objeto, podemos ver la clase que tenemos en ese momento, y ver si es esa la que queremos cambiar if (elemento.className == “tipo1”) {.

a continuación podemos ver un ejemplo.

<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.     var elemento = document.getElementById("capa-variable");
  23.     if (elemento.className == "tipo1") {
  24.       elemento.className = "tipo2";
  25.     }else {
  26.       elemento.className = "tipo1";
  27.     }
  28. }
  29. </script>
  30.  
  31. <div id="botones">
  32.     <input class="boton" type="button" onclick="javascript:CambiarEstilo();" value="Cambiar estilo" />
  33. </div>
  34. <div id="capa-variable" class="tipo1">esto es una capa</div>

esto es una capa