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») {.
<style>
.tipo1 {
background-color: red;
font-size: 20px;
height: 100px;
margin: 10px;
text-align: center;
width: 598px;
}
.tipo2{
background-color: grey;
font-size: 40px;
height: 100px;
margin: 10px;
text-align: center;
width: 500px;
}
</style>
<script>
function CambiarEstilo() {
var elemento = document.getElementById("capa-variable");
if (elemento.className == "tipo1") {
elemento.className = "tipo2";
}else {
elemento.className = "tipo1";
}
}
</script>
<div id="botones">
<input class="boton" type="button" onclick="javascript:CambiarEstilo();" value="Cambiar estilo" />
</div>
<div id="capa-variable" class="tipo1">esto es una capa</div>
esto es una capa
