cambiar clase jquery

<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>