Buenas,
Me interesaría saber cómo crear una hoja de estilo con javascript, insertarla en head y luego obtener un valor para poder referenciarla y usarla a través de document.styleSheets. He pensado lo siguiente:
1) Creo un elemento link y le inserto el atributo type="text/css"
2) Inserto dicho elemento link usando
document.head.appendChild( ... )
3) Guardo en una variable
indice el valor
document.styleSheets.length - 1 ( ¿seria la referencia a la ultima hoja de estilos insertada )
4) Inserto en
doucment.styleSheets[indice] varias reglas mediante el método
insertRule
Dudo, sobretodo, de si el punto 3 es correcto. Pues no se si del punto 2 se deduce que se insetará una nueva hoja de estilos al final de document.styleSheets . También he leído que StyleSheetList( la clase de document.styleSheets ) no tiene metodo para insertarle hojas de estilo.
También dudo en el punto 1. Pues no sé que comportamiento tendría una hoja de estilo que no haga referencia a ningún fichero en concreto con href.
Edit:
Con códigos como estos puede verse que añadir un link a document head no afecta a document.styleSheets:
Código Javascript
:
Ver originalconsole.log( document.styleSheets.length );
css = document.createElement( 'link' );
css.setAttribute( 'type', 'text/css' );
document.getElementsByTagName( 'head' )[0].appendChild( css );
console.log( document.styleSheets.length );
Un saludo y gracias!