Javascript para novatos 25º: Modificar atributo “style” (DOM)

Javascript para novatos 25º: Modificar atributo “style” (DOM)

publicado en: Diseño web | 0

En esta nueva entrega del curso de Javascript, vamos a aprender cómo acceder al atributo “style” y cómo modificarlo.

Acceder al objeto style

El objeto “style” es accesible a través de cualquier elemento del documento. Vamos con un ejemplo.

<h1 id="titular" style="background-color:silver">Titular</h1>

<script>  
                           
       var titular = document.getElementById("titular");

       alert(titular.style); 

</script>

// 25.1

En el ejemplo de arriba hemos accedido al style de “titular” para mostrarlo en un alert.

Dar popiedades style a un elemento

Una vez que sabemos cómo acceder al objeto style de un elemento, podemos a través de sus propiedades dar nuevos estilos o modificar los existentes.

<h1 id="titular" style="background-color:silver">Titular</h1>

<script>                               

       var titular = document.getElementById("titular");

       titular.style.backgroundColor="aquamarine"; 

</script>

// 25.2

En este caso a través del atributo “style” hemos modificado el valor de la propiedad “background-color”. En el caso de que el elemento no hubiese tenido esta propiedad se hubiese añadido.

Nota:

Como se puede ver en el ejemplo anterior (con backgroundColor), los nombres de las propiedades de style en Javascript no siempre son iguales a las utilizadas en CSS. Cuando en CSS la propiedad se compone de 2 palabras, por ejemplo “background-color” en Javascript se utiliza la escritura camelCase, “backgroundColor”.

Aquí dejo el acceso a un listado de las mismas: http://www.w3schools.com/jsref/dom_obj_style.asp

Crear un objeto “style”

También podemos crear un objeto “style” en el head (etiqueta <style>) del documento para que afecte a uno o varios elementos.

<h1>Titular</h1>
<p>Parrafo</p>

<script>                               

       var etiquetaStyle = document.createElement("style");
       var estilos = document.createTextNode("body{color:orange;}");

       etiquetaStyle.appendChild(estilos);

       document.head.appendChild(etiquetaStyle);

</script>

// 25.3

Explicaré este último ejemplo aunque como verás son pasos que ya habíamos visto anteriormente.

En primer lugar hemos creado un elemento, la etiqueta <style>. Después hemos creado un nodo de texto con la propiedad “body{color:orange;}” y se lo hemos añadido como hijo al elemento “etiquetaStyle”.

Por último, hemos añadido “etiquetaStyle” al “head” del documento.

 

Y esto es todo sobre el atributo “style” en el próximo capítulo veremos como trabajar con el atributo “class”.

 


Ir a Javascript para novatos 26º

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

Dejar una opinión