Trasteando con el DOM 6: estilos CSS

Cómo trabajar los estilos y las css con javaScript

Tarsila do Amaral

archivado en: JavaScript / 12 octubre, 2015 / taller:

Para el príncipe Edwin

Hace tiempo expliqué cómo trabajar las css de forma dinámica por php, ahora toca contar cómo hacerlo con javaScript y de paso preparar una entrada más de esta serie de javaScript para diseñadores aka Trasteando con el DOM.

Añadir estilos

La manera más sencilla de añadir un estilo por javaScript es definirlo y pegarlo directamente en el header.

var miEstilo = document.createElement('style');

miEstilo.innerHTML = ".cajita {border: 1px solid #900; color: #090;}";

document.head.appendChild(miEstilo);

Conviene usar appendChild para que nuestros estilos añadidos a mano se inserten después de los estilos de la página y, por lo tanto, los pisen por las reglas en cascada.

Esto puede ser útil, por ejemplo, cuando usamos alguna técnica responsive que necesite añadir una clase u otra en función del dispositivo o, como me ocurrió con un proyecto para Santillana, cuando el usuario personaliza estilos. En ese caso, necesitaba que sobre una carcasa que servía de base a un libro electrónico, se añadieran unos estilos de forma dinámica en función de la materia que se tratase. Así, por ajax recibía algo así...

var colors = [

{"primary": "#900", "main-primary": "#090"},

{"secondary": "#ccc"}

];

Y lo único que debía hacer era recorrer el array:

var style,

prop,

i = 0,

len = colors.length;

for (; i<len; i++) {

for (prop in colors[i]) {

style = document.createElement('style');

style.innerHTML = "."+prop+" {color: "+colors[i][prop]+";}";

document.head.appendChild(style);

}

}

Pero se puede conseguir lo mismo de forma un poco más sofisticada mediante el api de CSSStyleSheet.

CSSStyleSheet

La propiedad más importante de este objeto es styleSheets, que devuelve un array con las hojas de estilo de un documento:

var todoEstilos = document.styleSheets;

console.log(todoEstilos[0]);

/*

cssRulesarray con todas las reglas

disabled: false

href: "bootstrap.css"

media: MediaList

ownerNode: link

ownerRule: null

parentStyleSheet: null

rules: null

title: null

type: "text/css"

*/

A partir de esta propiedad podemos hacer algunas jugadas curiosas, como modificar una de sus reglas. Por ejemplo, si esta fuera la primera regla de una hoja de estilo:

.blue {

color: #009;

}

Para modificarla bastaría con hacer algo así:

var todoEstilos = document.styleSheets;

todoEstilos[1].cssRules[0].style.color="#900";

Ojo, para probar esto hay que hacerlo desde un servidor, local o remoto, para evitar el cross-domain.

Pero son más interesantes en lo que nos atañe, la manipulación del DOM, sus dos métodos:

  • stylesheet.deleteRule(): borra una regla
  • stylesheet.insertRule(): inserta una regla

Que nos permiten borrar o añadir reglas:

var todoEstilos = document.styleSheets;

/* Para todos los navegadores salvo el IE < 9 */

if (todoEstilos[1].insertRule) {

todoEstilos[1].insertRule (".colorao {color:red}", 0);

/* Para la castaña del IE 8 */

else if (todoEstilos[1].addRule) {

todoEstilos[1].addRule (".colorao", "color:red", 0);

}

Clases y estilos en línea

Visto cómo trabajar las reglas generales, vamos ahora con los estilos en línea y las clases que se pueden trabajar atacando directamente a los elementos del DOM.

Lo más sencillo es cambiar o añadir directamente los estilos. Seleccionamos el o los elementos que sean y luego modificamos su propiedad style.

element = document.querySelector("#foo");

element.style.color = "#090";

element.style.fontSize = "24px";

Para las clases hay que jugar con classList y sus métodos add, remove y toggle.

var element = document.querySelector('#mm');

element.classList.remove("foo");

element.classList.add("awesome");

/* Si está presente, la quita; sino, la añade */

element.classList.toggle("haga-basin");

Bueno, pues por hoy lo dejo aquí.

|| Tags: ,

valoración de los lectores sobre Trasteando con el DOM 6: estilos CSS

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.