Trouble programmatically adding CSS to IE

Question

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.

This has reached "complete mystery" status for me.

Mister Lucky · Accepted Answer · 2009-03-26 04:48:26Z

4

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.

edited Mar 26, 2009 at 4:48

answered Mar 25, 2009 at 17:49

Mister Lucky

4,0832 gold badges22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Lianza Over a year ago

It works on the home page, but it doesn't work here: amazon.com/Combi-Pod-Bouncer-in-Wasabi/dp/B0010BPM24/…

Oso · Accepted Answer · 2012-11-26 16:57:45Z

2

Looking for an answer, I have found that the 31 stylesheets limit raise this exception when loading CSS programatically:

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

The original limitation is described in a Knowledge Base document (suppossed only to happen on IE8 and below, but repeatedly reported as happening in IE9):

http://support.microsoft.com/kb/262161

answered Nov 26, 2012 at 16:57

Oso

5284 silver badges18 bronze badges

Comments

score 0 · Accepted Answer · 2009-03-25 19:35:22Z

0

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);
};

answered Mar 25, 2009 at 19:35

1 Comment

Tom Lianza Over a year ago

Yup - that's the code we use which works everywhere except on Amazon product pages :(

Ben New · Accepted Answer · 2010-11-29 03:42:38Z

0

I was doing something similar using jQuery and found that I had to do it in this order:

var $link = $('&lt;link&gt;');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

Otherwise it doesn't work in IE (IE7, haven't looked at IE8 yet).

HTH

answered Nov 29, 2010 at 3:42

Ben New

1

Collectives™ on Stack Overflow

Trouble programmatically adding CSS to IE

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related