Como faço para carregar regras CSS dinamicamente em Webkit (Safari / Chrome)?

Question

Actualmente tenho problemas em Webkit (Safari e Chrome) foram tento carregar dinamicamente (innerHTML) alguns html em um div, o html contém regras CSS (...), após o html é renderizado as definições de estilo não são carregado (tão visualmente posso dizer os estilos não são lá e também se eu procurar com javascript para eles há estilos são encontrados). Eu tentei usar um plugin jQuery tocssRule (), ele funciona, mas é muito lento. Existe outra maneira de conseguir webkit para carregar os estilos dinamicamente? Obrigado. Patrick

Answer 1

Eu acho que é uma prática melhor para anexar um tag "link" para a cabeça do seu documento. Se isso não for possível, tente anexar uma tag "estilo" na cabeça. Estilo tags não devem estar no corpo (nem sequer validar).

Anexar ligação tag:

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

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

link.type = 'text/css';

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

document.head.appendChild(link);

Anexar marca de estilo:

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

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

document.head.appendChild(style);

Answer 2

Em linha reta-up jQuery maneira (que funciona em principais navegadores - incluindo Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

A partir do site:

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

Nota:. O exemplo também inclui a injeção de JS, que pode ser ignorado se você quiser apenas para injetar uma referência CSS

Answer 3

maneira mais simples (usando jQuery que é) é o seguinte:

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

Se você fazê-lo dessa maneira, então ele vai trabalhar no Safari. Se você fizer isso da maneira jQuery normal (tudo em uma sequência de texto) irá falhar (o CSS não carga).

Então você só anexá-lo na cabeça com $ ( 'cabeça') append (cssLink);.

Answer 4

Graças Vatos, você me deu uma boa vantagem, basicamente, eu fiz o que você sugeriu, mas jquery usado para definir o html e anexar o novo estilo para a cabeça uma vez, safari / cromo iria parar ao fazer innerHTML e document.head foi indefinido . Meu código terminou com essa aparência

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

Answer 5

meh. Eu não tenho pontos suficientes para votar-se o resultado de Andrei Cimpoca, mas que a solução é a melhor aqui.

style.innerHTML = "..."; não funciona no motores webkit ou IE.

Para corretamente injetar texto css, você deve:

style.styleSheet.cssText = "..."; para isto.

e

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

O Firefox também irá trabalhar com a segunda opção, ou com style.innerHTML = "...";

Answer 6

Aqui está o show. O que Patrick disse não funcionou para mim. Aqui está como eu fiz isso.

    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 é obsoleto e não deve ser usado para tal coisa a. Além disso, é mais lento também.

Answer 7

Além das versões baseadas tag estilo acima, você também pode adicionar estilos usando javascript diretamente:

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

Isto tem a vantagem de ser capaz de usar variáveis ??sem ter que recorrer a cssText / innerHTML.

Tenha em mente que em navegadores baseados no WebKit isso pode ser lenta se você estiver inserindo um monte de regras. Há uma aberta bug para corrigir esse problema de desempenho em webkit ( https: //bugs.webkit .org / show_bug.cgi? id = 36303 ). Até então, você pode usar as tags de estilo para inserções em massa.

Esta é a maneira padrão W3C de inserir regras de estilo, mas não é suportado por qualquer versão do IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

Eu sei que é um tema antigo, mas pensei que alguém iria beneficiar. Eu também precisava css carga dinamicamente em minha página (antes de tudo prestados onload, segundo incluídos modelos "componentes"):

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

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

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

Eu tentei acrescentar ao document.head com uma abordagem de uma linha - trabalhou no IE 10 e Chrome, mas não no Safari. A abordagem acima funcionou em todos os 3.