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.
<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() {
if ($('#capa-variable').hasClass('tipo1')){
$('#capa-variable').addClass('tipo2');
$('#capa-variable').removeClass('tipo1');
}else {
$('#capa-variable').removeClass('tipo2');
$('#capa-variable').addClass('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
