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.