Categorías: jquery

Como cambiar la clase de un elemento html con jquery

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

esto es una capa

felixbs