'Caché' en enlace onclick javascript

[Alexis88]

Un pequeño ejemplo:

Código HTML:

<div id = "capa" class = "estilo1"></div>
<label onclick = "capa()">Cambia</label>
 

Código CSS:

.estilo1{
    background: red;
}
 
.estilo2{
    background: green;
}
 

Código Javascript:

function capa(){
    var miCapa = document.getElementById("capa"),
        estilo = miCapa.className;
    if (estilo == "estilo1"){
        miCapa.className = "estilo2";
    }
    else{
        miCapa.className = "estilo1";
    }
}
 

Tengo una división de id 'capa' y clase 'estilo1', además de una etiqueta a la cual, al darle un clic, ejecuta la función 'capa'. En la hoja de estilos, tengo dos clases: estilo1 y estilo2. La primera, asigna un color rojo como fondo al elemento afectado, mientras que la segunda, asigna un color verde.

En la función, tomo al elemento de id 'capa' y a su clase, luego, si la clase que posee el elemento es 'estilo1', la cambio por 'estilo2' y viceversa.

DEMO

Saludos