Question

I currently have issues in Webkit(Safari and Chrome) were I try to load dynamically (innerHTML) some html into a div, the html contains css rules (…), after the html gets rendered the style definitions are not loaded (so visually I can tell the styles are not there and also if I search with javascript for them no styles are found). I have tried using a jquery plugin tocssRule(), it works but it is just too slow. Is there another way of getting webkit to load the styles dynamically? Thanks. Patrick

Answer 1

I think it’s a better practice to append a ‘link’ tag to the head of your document. If that isn’t possible, try to append a ‘style’ tag to the head. Style tags shouldn’t be in the body (Doesn’t even validate).

Append link 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); 

Append style tag:

var style = document.createElement('style');  style.innerHTML = 'body { background-color: #F00; }';  document.head.appendChild(style);