estilo - modificar style con jquery

Cómo aplicar CSS en línea y/o externa cargados dinámicamente con jQuery

Question

Tengo un control Ajax que se carga en una ventana emergente de Yahoo usando jQuery.

Solo uso una solicitud .get simple para cargar el HTML.

  $.get(contentUrl, null, function(response) {
         $(''#dialog'').find(''.bd'').assertOne().html(response);
     }, "waitDlg");

Ahora el problema es que el contenido que se carga necesita su propio CSS que en realidad se crea dinámicamente. Tengo la opción de incluir o usar una hoja de estilo CSS externa.

La prueba en Chrome muestra que el CSS cargado a través de AJAX no se evalúa / aplica en el momento en que se agrega al DOM utilizando el código anterior.

Internet Explorer evaluará un CSS incrustado cuando simplemente se atasca en el DOM, pero Chrome no lo hará. Actualmente no puedo realizar pruebas en Firefox debido a un problema que no tiene relación.

¿Hay alguna forma en jQuery de evaluar una hoja de estilo que se agregó dinámicamente al DOM como una línea o?

Hay muchas razones por las que me gustaría hacer esto:

• el css en la ventana emergente pertenece a la ventana emergente y puede provenir de un entorno completamente diferente
• es dinámico y no quiero ponerlo en la página principal a menos que sea absolutamente necesario
• ¡planeé que funcionara así y no funciona! :-(

Answer 1

Dado un camino a su hoja de estilo (o alguna URL que generará un CSS válido):

var myStylesLocation = "myStyles.css";

... cualquiera de estos debería funcionar:

Cargar usando AJAX

$.get(myStylesLocation, function(css)
{
   $(''<style type="text/css"></style>'')
      .html(css)
      .appendTo("head");
});   

Cargar usando <link> creado dinámicamente

$(''<link rel="stylesheet" type="text/css" href="''+myStylesLocation+''" >'')
   .appendTo("head");

Cargar usando <estilo> creado dinámicamente

$(''<style type="text/css"></style>'')
    .html(''@import url("'' + myStylesLocation + ''")'')
    .appendTo("head");

o

$(''<style type="text/css">@import url("'' + myStylesLocation + ''")</style>'')
    .appendTo("head");

Answer 2

La respuesta aceptada no funcionará en IE 7 (y fallará en IE 8). Lo siguiente funcionará tanto en IE como en FF y Chrome / Safari:

var url = ''urlOfStyleSheet.css''
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement(''link'');
    css.rel     = ''stylesheet'';
    css.type    = ''text/css'';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

Answer 3

var cssPath = "/path/to/css/";

var linkStr = document.createElement("<link rel=''stylesheet'' type=''text/css'' href=''"+cssPath+"'' media=''screen'' />");

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