Agregar de forma dinámica CSS con JavaScript

Hace poco tuve la necesidad de modificar el CSS usando JavaScript después de que se cargara toda la cabecera (<HEAD>), entonces debía buscar la forma de agregar ese CSS y actualizar la página de forma dinámica. Entonces vi en el Blog de YUI una forma bien interesante de hacerlo, para resumir lo que vamos a hacer es agregar código CSS a nuestra página a partir de una variable de texto, y si no existen dichos tags (<head> - </head>) entonces los creamos e insertamos el texto de nuestra variable.

Lo primero es crear una variable para contener el tag del header e indicarle que será del tipo "text/css":

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

Luego Vamos a buscar si existe el elemento, sino lo creamos y concatenamos al nodo:

if (nodo.styleSheet) {
  nodo.styleSheet.cssText = codigo;
} else {
  nodo.appendChild(document.createTextNode(codigo));
}

Y por último lo agregamos al html:

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

Ya solo nos resta crear la variable con el CSS dentro del script y llamar a la función, algo como esto:

var css = 'body{'+
  'font: normal 12px Arial, Helvetica, sans-serif;'+
'}'+
'table {'+
  'border-width: medium;'+
  'border-spacing: 0px;'+
  'border-style: inset;'+
  'border-color: gray;'+
  'border-collapse: collapse;'+
  'background-color: white;'+
  'text-align:center;'+
'}'+
'table th, table td {'+
  'border: none'+
  'border-width: 1px;'+
  'padding: 4px;'+
  'border-top: 1px solid #000;'+
'}';

agregarCss(css);

El ejemplo completo vendría quedando algo así:

<html>
 <head>
  <title>Probando Script CSS</title>
 </head>
 <body>
  <table>
   <tr><td colspan="5"><span><b>UN TITULO</b></span></td></tr>
   <tr><td>Campo A</td><td>Campo B</td><td>Campo C</td><td>Campo D</td><td>Campo E</td></tr>
   <tr><td colspan="3">Texto 1</td><td colspan="2">Texto 2</td></tr>
   <tr><td>Celda X</td><td colspan="3">Celda Y</td><td>Celda Z</td></tr>
  </table>
 </body>
 <script>
  function agregarCss(codigo) {
   var nodo = document.createElement("style");
   nodo.type = "text/css";
   if (nodo.styleSheet) {
     nodo.styleSheet.cssText = codigo;
   } else {
     nodo.appendChild(document.createTextNode(codigo));
   }
   document.getElementsByTagName("head")[0].appendChild(nodo);
  }

  var css = '.titulo {'+
   'background-color: #CFE6F9;'+
  '}'+
  'body{'+
   'font: normal 12px Arial, Helvetica, sans-serif;'+
  '}'+
  'table {'+
   'border-width: medium;'+
   'border-spacing: 0px;'+
   'border-style: inset;'+
   'border-color: gray;'+
   'border-collapse: collapse;'+
   'background-color: white;'+
   'text-align:center;'+
  '}'+
  'table th, table td {'+
   'border: none'+
   'border-width: 1px;'+
   'padding: 4px;'+
   'border-top: 1px solid #000;'+
  '}';

  agregarCss(css);
 </script>
</html>

NOTA: Con IE esto solo funciona para un solo tag, si tenemos mas de uno entonces puede que el navegador produzca un error interno.

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión

Carlitox en la Web

Agregar de forma dinámica CSS con JavaScript