Javascript para novatos 26º: Modificar atributo “class” (DOM)

Javascript para novatos 26º: Modificar atributo “class” (DOM)

publicado en: Diseño web | 0

En el anterior capítulo del curso de Javascript, vimos cómo acceder y modificar el atributo “style”, ahora le toca el turno al atributo “class”.

Habitualmente trabajamos con grupos de estilos CSS a través del atributo “class”, lo que se denominan clases. Las clases dentro de las hojas de estilo no pueden ser modificadas desde Javascript, pero sí que pueden ser reemplazadas.

Propiedad className

Esta propiedad establece o devuelve el valor del atributo “class”.

<head>
       <style>
              .miClase {
                    border:solid 1px orange;
                    background-color:silver;
                    font-size:1.5em;
                    color:white;
                    text-align:center;
              }
       </style>
</head>
<body>
       <h1>Esto es un titular</h1>    

       <script>                               

              var titular = document.getElementsByTagName("h1")[0];

              titular.className = "miClase";

       </script>   
</body>

// 26.1

En este ejemplo le hemos pasado el valor “miClase” al atributo “class”, con lo cual se aplicarán los estilos correspondientes de la clase .miClase.

Cuando a un elemento se le han asignado varias clases es preferible utilizar la nueva propiedad “classList”.

Propiedad classList

(No es soportada en su totalidad en versiones anteriores a ie 10)

Esta propiedad nos proporciona varios métodos para manipular el atributo class.

– Método add()

Añade una o más clases al elemento.

<head>
       <style>
              .miClase {
                    border:solid 1px orange;
                    background-color:silver;
                     font-size:1.5em;
                     color:white;
                     text-align:center;
              }                         
       </style>
</head>
<body>

       <h1>Esto es un titular</h1>    

       <script>                        

              var titular = document.getElementsByTagName("h1")[0];    
              titular.classList.add("miClase");

       </script>   
</body>

// 26.2

– Método remove()

Elimina una o más clases de un elemento.

<head>
       <style>
              .miClase {
                    border:solid 1px orange;
                    background-color:silver;
                    font-size:1.5em;
                    color:white;
                    text-align:center;
              }                         
       </style>
</head>
<body>

       <h1 class="miClase">Esto es un titular</h1> 

       <script>                        

              var titular = document.getElementsByTagName("h1")[0];

              titular.classList.remove("miClase");

       </script>   
</body>

// 26.3

– Método toggle()

Funciona como un interruptor, si el elemento ya posee la clase indicada la elimina, y si no la añade.

titular.classList.toggle("miClase");

– Método contains()

Devuelve un valor booleano dependiendo de si el elemento posee la clase que indiquemos.

Devolverá “true” si posee la clase, en caso contrario “false“.

<h1 class="miClase">Esto es un titular</h1> 

<script type="text/javascript">   

       var titular = document.getElementsByTagName("h1")[0];

       alert(titular.classList.contains("miClase"));

</script>

// 26.4

– Método item()

Devuelve el nombre de la clase según su posición dentro del atributo class. Para especificar la posición le pasaremos un número como parámetro. Recuerda que en Javascript los índices comienzan en “0”.

<h1 class="clase1 clase2">Esto es un titular</h1>  

<script type="text/javascript">

       var titular = document.getElementsByTagName("h1")[0];

       alert(titular.classList.item(1));

</script>

// 26.5

 

Y hasta aquí el atributo “class”, con el cerramos esta serie de capítulos dedicados al DOM. En la próxima entrega trataremos la “Programación basada en eventos.

 


Ir a

Share on LinkedInShare on FacebookShare on Google+Tweet about this on Twitter

Dejar una opinión