Crear estilos CSS on-line

21/Ene/2008 JavaScript , , , , 3 Comentarios

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"

  1. estilo = document.createElement("style");
  2. 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.

  1. codigo = "body{background: red;}";
  2. 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.

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

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

  1. codigo = "body{background: red;}";
  2.  
  3. if (estilos.styleSheet){
  4. estilos.styleSheet.cssText = codigo;
  5. } else {
  6. estilos.appendChild(document.createTextNode(codigo));
  7. }

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.

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

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

  1. <script type="text/javascript">
  2. function crearEstiloOnline(){
  3. var estilos = document.createElement("style");
  4. estilos.type = "text/css";
  5.  
  6. codigo = "body{background: red;}";
  7.  
  8. if (estilos.styleSheet){
  9. estilos.styleSheet.cssText = codigo;
  10. } else {
  11. estilos.appendChild(document.createTextNode(codigo));
  12. }
  13.  
  14. document.getElementsByTagName("head")[0].appendChild(estilos);
  15. }
  16. </script>

Vía: Intenta

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Crear estilos CSS on-line”

Víctor Cuervo

bebo

sabrosaurio♥

Víctor Cuervo

bebo

body{background: red;}”

Víctor Cuervo

nombre

no poes este documento me sirvio mucho

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*