¿Agregar CSS a <head> con JavaScript?
¿Hay alguna manera de agregar css desde una cadena en el archivo javascript al encabezado de un documento con javascript?
Digamos que tenemos una página web, que tiene un script lightbox, este script requiere un archivo CSS para funcionar.
Ahora agregando este archivo CSS con<link> hará que el archivo css se descargue incluso para personas que no tienen habilitado js.
Sé que puedo cargar dinámicamente el archivo css con el script, pero eso también significa que habrá 2 solicitudes http, y en los casos en que hay poco o ningún css en el archivo, considero que esto es ineficiente.
Así que pensé para mí mismo, ¿qué pasaría si pudieras poner el css que tienes en el archivo css, en el script, hacer que el script analice el css y lo agregue a la cabeza, o incluso mejor solo que el script agregue el css directamente el<head> del documento
Pero no he encontrado nada en línea que sugiera que esto sea posible, entonces ¿es posible agregar CSS a la cabeza con js?
Editar + SOLUCIÓN:Edité la respuesta de roryf para trabajar en varios navegadores (excepto IE5)
Javascript:
function addcss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else { // the world
s.appendChild(document.createTextNode(css));
}
head.appendChild(s);
}