23.4.07

Lectura dinámica de hojas de estilo

Para aquellos que gustan de escribir hojas de estilo separadas para cada navegador, acá va un código Javascript que, manipulando el DOM nos perpite cargar una hoja de estilo e insertarla en la sección HEAD del documento.

var cssNode = document.createElement('link')
cssNode.type = 'text/css'
cssNode.rel = 'stylesheet'
cssNode.href = 'http://www.somedomain.com/styles/FireFox.css'
cssNode.media = 'screen'
cssNode.title = 'dynamicLoadedSheet'
document.getElementsByTagName("head")[0].appendChild(cssNode)

.

ciberbanner.com intercambio de banners

5 Comentarios:

Anónimo dice...

mira vos que buenooo dr. J

Anónimo dice...

Hola

Has probado si se puede "crear" una hoja de estilos con javascript en un iframe con el codigo de arriba? Podrias decirme como se haria?

Gracias

Julio González Seara dice...

En realidad la carga dinámica la hace la página que insertas en el iframe. Pero si lo deseas hacer cuando la página ya esta leida y desde la página padre, solo debes hacer referencia al id del iframe para capturar el objeto y de ahí en más es lo mismo que en el ejemplo, siempre anteponiendo el nombre del objeto iframe a los objetos que document y los "hijos" de éste.

Anónimo dice...

Lo he intentado de esta manera:

script:

function init()
{
cssNode = document.createElement('style');
cssNode.type = 'text/css';
window["prueba"].document.getElementsByTagName("head")[0].appendChild(cssNode);
}


body (onload="init())
(iframe) id="prueba" name="prueba" width=100 height=100 top=20 left=20 src="")(/iframe)

(Pongo las etiquetas con parentesis porque no me deja publicarlas :p )

-->
pero me da un error en la linea 7 (la linea de window[...)

He intentado con document.getElementById('prueba').document.getElementsByTagName("head")[0].appendChild(cssNode); y no me da error ninguno pero creo que no me crea dentro del iframe ninguna etiqueta style, sin embargo si he conseguido introducir codigo HTML dentro del body con window["prueba"].document.body.innerHTML...

¿Sabrias como hacer lo que intento? Si es asi ¿podrias mandarme el codigo por favor?

Muchas Gracias por tu anterior respuesta :)

Julio González Seara dice...

Acá te paso el código necesario

idoc = document.getElementById("iprueba")
var iCssNode = idoc.contentWindow.document.createElement('link')
iCssNode.type = 'text/css'
iCssNode.rel = 'stylesheet'
iCssNode.href = 'prueba.css'
iCssNode.media = 'screen'
iCssNode.title = 'dynamicLoadedSheet'
idoc.contentWindow.document.getElementsByTagName("head")[0].appendChild(iCssNode)

Este código supone que el IFRAME se llama iprueba, y que la hoja de estilos está en el archivo prueba.css

No te lo he mandado puesto que me mandaste los comentarios en forma anónima. Salu2.