¿Cómo cargo las reglas de css dinámicamente en Webkit (Safari/Chrome)?

Question

Actualmente tengo problemas en Webkit (Safari y Chrome) cuando trato de cargar dinámicamente (innerHTML) algunos html en un div, el html contiene reglas de css (...), después de que el html se muestra las definiciones de estilo no se cargan (así que visualmente puedo decir que los estilos no están allí y también si busco javascript para ellos no se encuentran los estilos). He intentado usar un plugin jquery tocssRule(), funciona pero es demasiado lento. ¿Hay alguna otra forma de hacer que webkit cargue los estilos dinámicamente? Gracias. Patrick

Answer 1

Creo que es una mejor práctica agregar una etiqueta de "enlace" al encabezado de su documento. Si eso no es posible, intente agregar una etiqueta de "estilo" a la cabeza. Las etiquetas de estilo no deberían estar en el cuerpo (ni siquiera validan).

Anexar enlace de la etiqueta:

var link = document.createElement('link'); 

link.setAttribute('rel', 'stylesheet'); 

link.type = 'text/css'; 

link.href = 'http://example.com/stylesheet.css'; 

document.head.appendChild(link); 

etiqueta de estilo Anexar:

var style = document.createElement('style'); 

style.innerHTML = 'body { background-color: #F00; }'; 

document.head.appendChild(style); 

Answer 2

Gracias Vatos, que me dio una buena ventaja, básicamente, hice lo que sugirió sino que se utiliza jQuery para establecer el html y Añada el nuevo estilo al encabezado, ya que safari/crome se detendría cuando no se definiera innerHTML y document.head. Mi código terminó con este aspecto

var cssDefinitions = '..my style chunk goes here'; 
var style = document.createElement('style');' 
$(style).html(cssDefinitions); 
$('head').append(style);

Answer 3

Aquí está el concierto. Lo que dijo Patrick no funcionó para mí. Así es como lo hice.

var ref = document.createElement('style'); 
ref.setAttribute("rel", "stylesheet"); 
ref.setAttribute("type", "text/css"); 
document.getElementsByTagName("head")[0].appendChild(ref); 
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie 
else ref.appendChild(document.createTextNode(asd)); 

InnerHTML está desaprobado y no debe utilizarse para tal cosa. Además, es más lento también.

Answer 4

manera más simple (con jQuery que es) es la siguiente:

var cssLink = $('<link />'); 
cssLink.attr("rel","stylesheet") 
cssLink.attr("type", "text/css"); 
cssLink.attr("href","url/to.css"); 

Si lo haces de esa manera entonces que va a trabajar en Safari. Si lo haces de la manera jQuery normal (todo en una secuencia de texto), fallará (la CSS no se cargará).

Luego solo lo agrega al encabezado con $ ('head'). Append (cssLink);

Answer 5

recta de manera jQuery (que funciona en los navegadores más importantes - incluyendo Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Desde el sitio:

$("head").append("<link />"); 
var CSS = $("head").children(":last"); 
CSS.attr({ 
"rel": "stylesheet", 
"type": "text/css", 
"href": "url/to.css" 
}); 

Nota: el ejemplo también incluye la inyección de JS, que puede ser ignorada si solo quieres inyectar una referencia CSS.

Answer 6

meh. No tengo suficientes puntos para votar el resultado de Andrei Cimpoca, pero esa es la mejor solución aquí.

style.innerHTML = "..."; no funciona en motores webkit o es decir.

para inyectar correctamente el texto css, debe:

style.styleSheet.cssText = "..."; por ejemplo.

y

style.appendChild (documento.createTextNode ("...")); para webkit.

Firefox también funcionará con la segunda opción, o con style.innerHTML = "...";

Answer 7

Además de las versiones basadas etiqueta de estilo anteriores, también se puede añadir directamente a través de estilos javascript:

var style = document.getElementById('some-style-tag'); 
var sheet = style.sheet; 
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length); 

Esto tiene la ventaja de ser capaz de utilizar variables sin tener que recurrir a cssText/innerHTML.

Tenga en cuenta que en los navegadores basados ​​en webkit esto puede ser lento si está insertando muchas reglas. Hay un error abierto para solucionar este problema de rendimiento en webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Hasta entonces, puedes usar etiquetas de estilo para inserciones masivas.

Ésta es la forma estándar del W3C de la inserción de reglas de estilo, pero no es compatible con cualquier versión de IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

Sé que es un tema viejo, pero pensé que alguien se beneficiaría. Yo también tenía que cargar el archivo CSS dinámicamente en mi página (antes de que todo vuelve proceso de carga, de acuerdo con las plantillas "componente" incluidas):

var oStyle = $("<style />"); 

oStyle.append("@import url(" + sTemplateCssUrl + ");"); 
oStyle.attr("type", "text/css"); 

$(document.head).append(oStyle); 

He intentado anexar a document.head con un enfoque de una sola línea - trabajado en IE 10 y Chrome, pero no en Safari. El enfoque anterior funcionó en todos 3.