Categorías: javascript

Como cambiar la clase de un elemento html con javascript

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

esto es una capa
felixbs

Compartir
Publicado por
felixbs
Etiquetas: className()

Entradas recientes

mediaquerys para tablet

/* sin diferencias entre vertical y horizontal */@media only screenand (min-width: 768px)and (max-width: 1024px){ /*…

4 años hace

Strings en php – operaciones básicas con cadenas

Vamos a ver las principales funciones para tratar cadenas o strings en php. Concatenar dos…

9 años hace

Cookie – Añadir, leer y borrar cookies con JQuery

Lo primero que vamos ha hacer es definir que es una cookie: "Una cookie, galleta…

9 años hace

Formularios Symfony2 y twig, campos de textos, numeros, combos y radio buttom

En los formularios de Symfony2 con twig, pondemos añadir campos de texto, nuemericos, combos y…

12 años hace

Instalar Symfony2 rápidamente y fácilmente en Windows 7 y Windows 10

Instalar symfony2 en rápidamente windows 7 y windows 10 requiere de varios pasos que iremos…

12 años hace

Quitar app_dev.php de la url de symfony 2

Para quitar de la url de nuestro symfony2 el app_dev.php modificaremos del .htaccess que lo…

12 años hace