Añadir CSS dinámicamente en tu web

En el Yahoo! User Interface Blog, hace unos días, publicaron un interesante artículo sobre como, con DOM, añadir CSS dinámicamente dentro de nuestra página. Mediante una simple función javascript podemos embeber CSS dentro de nuestro HTML, añadiendo las etiquetas <style></style> dentro de la cabecera de nuestra web. La función es:

1. function addCss(cssCode) {
2. var styleElement = document.createElement(”style”);
3. styleElement.type = “text/css”;
4. if (styleElement.styleSheet) {
5. styleElement.styleSheet.cssText = cssCode;
6. } else {
7. styleElement.appendChild(document.createTextNode(cssCode));
8. }
9. document.getElementsByTagName(”head”)[0].appendChild(styleElement);
10. }

Este método es soportado por todos los navegadores modernos. Podemos utilizarla tanto para cambiar dinámicamente nuestro CSS o para añadir nuevas propiedades al mismo. Por ejemplo, podríamos cambiar el fondo de nuestra web:

1. <a href=”javascript:addCss(’body{background-image: url(images/pat.gif);}’)”>Cambiar fondo</a>