Trouble programatically adding CSS to IE

Question

Hi all,

I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet).

Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward:

document.getElementsByTagName('head')[0].appendChild(s);

Where "s" is a link object created with document.createElement. Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document.styleSheets collection in JavaScript, it's not there.

As a test, I tried to use the IE-only document.createStyleSheet method passing the URL to my stylesheet as an argument. This throws the error:

Not enough storage is available to complete this operation

Points of interest:

• The documentation for document.createStyleSheet says an error will be thrown if there are more than 31 stylesheets on the page but (1) it's a different error, and (2) there are only 10 external stylesheets on the page.
• My googling for the error turned up a number of dead-ends, and the only one that suggested anything stylesheet-related was this drupal post, but it refers to a character limit on inline styles, as opposed to a problem relating to external styles.
• The same code, even the createStyleSheet call, works on other sites in IE.

Any advice would be appreciated. This has reached "complete mystery" status for me.

Answer 1

I just tried this

javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);

and

javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);

from IE on amazon.com and both worked. Maybe you need to add the !important to some items of your css to be sure they take effect now?

UPDATE: Found a possible solution for you...

javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);

Hope it helps you.

Answer 2

This is all I do, and it I have never seen it not work.

loadCss = function( name, url ) {

    var head = document.getElementsByTagName('head')[0];

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

    link.setAttribute("type", "text/css");

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

    link.setAttribute("href", url);

    link.setAttribute("media", "screen");

    head.appendChild(link);
};