Artículos
Javascript

Crear estilos CSS on-line

21/Ene/2008

En un procedimiento de diseño estándar lo más normal es que al mismo tiempo que definimos cómo será nuestra página vamos creando nuestras hojas de estilo CSS. De tal manera, cada vez que se realice una petición sobre la página, se descargue la hoja de estilos asociada.

Si bien, manipulando el DOM de la página podemos conseguir unos efectos interesantes, ya que podemos crear estilos CSS on-line.

La idea es crear un elemento style y dotarle de contenido. Es decir, de los estilos que queremos crear online.

Para crear el elemento style utilizamos el método document.createElement. Además indicaremos que el tipo de elemento es un «text/css»

estilo = document.createElement("style");
estilo.type = "text/css";

Una vez creado el elemento, deberemos de añadirle el estilo hojas de estilo CSS que queremos crear on-line. En este punto tenemos dos formas de hacerlo, dependiendo de los navegadores (como no). En el caso del Internet Explorer al crear un elemento style, se dispone del objeto styleSheet y de su propiedad cssText donde podemos asignar el código hojas de estilo CSS.

codigo = "body{background: red;}";
estilos.styleSheet.cssText = codigo;

Vemos que el código hojas de estilo CSS añadido es muy sencillo, ya que simplemente pone el fondo de la página a rojo. Podemos poner el código hojas de estilo CSS que queramos.

En el caso estándar lo que hacemos es crear un nodo hijo sobre el elemento. Es decir, manipularmos el DOM.

codigo = "body{background: red;}";
estilos.appendChild(document.createTextNode(codigo)); 

El código con la decisión será algo así:

codigo = "body{background: red;}";
  
if (estilos.styleSheet){
   estilos.styleSheet.cssText = codigo;
} else {
   estilos.appendChild(document.createTextNode(codigo)); 
}

Ahora solo nos quedará el añadir el elemento style al DOM de nuestra página. Y nos preguntaremos, ¿en que parte del DOM? y la respuesta es ¿donde ponemos los estilos CSS normalmente? En la cabecera.

Pues añadimos el elemento style sobre el elemento HEAD del DOM.

document.getElementsByTagName("head")[0].appendChild(estilos);

Ahora solo nos quedará lanzar este código en algún punto de la página.

Vía: Intenta

Código Fuente

Descárgate el código fuente de Crear estilos CSS on-line
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios