Javascript, appended CSS not working on Webkit

Asked May 24 '13 at 18:36

Active May 24 '13 at 18:36

Viewed 95 times

Once again, I turn to the expertise of the crowd :-)

I have appended a new stylesheet like so:

var css = "#newElement { color: #ff0000 }";
style = document.createElement('style');
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
} else { 
        style.appendChild(document.createTextNode(css));
}
parent.document.getElementsByTagName('head')[0].appendChild(style);

I then create a new div like so:

var newElement = document.createElement("div");
newElement.id = "newElement";

The new style works fine on Firefox (turns to red) but not on Webkit (Chrome/Safari)... I dont have the means to test on IE...

Does anyone know if there is an issue with webkit that would cause this? or any tips on how I can get this to be compatible?

I need to change things like links and hover attributes so using the direct method of changing styles of a DOM object will not work and I do not have the option of using jQuery

asked May 24 '13 at 18:36

Jesse Williams

1

http://jsfiddle.net/dxATN/ works fine here, maybe you forgot to add the new div to the dom or used a javascript feature someplace else in the code that only works in firefox like `let`? – Benjamin Gruenbaum May 24 '13 at 18:39
`parent.document` makes me wonder: is this cross-domain? – bfavaretto May 24 '13 at 18:41
1

Any errors in the console? – Marcel Gwerder May 24 '13 at 18:42
Its not cross domain, its in an iFrame referring to the parent (same domain). No console errors... I see that its working fine on the jsfiddle but still nothing on my end... not sure why – Jesse Williams May 24 '13 at 19:31
may be parent' head is still not ready? – Ivan Chernykh May 24 '13 at 20:07
@Cherniv, possible, but it seems that I would get an error stating that head was null – Jesse Williams May 24 '13 at 20:30
[This question](http://stackoverflow.com/questions/17747616/webkit-dynamically-created-stylesheet-when-does-it-really-load) has some info about dynamically created stylesheets. – undefined Jul 28 '13 at 15:04

Javascript, appended CSS not working on Webkit

0 Answers0