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º
Dejar una opinión