Question

I need to change priority of loaded .css files using javascript. I found that i can do this just by replacing position of < link rel=”stylesheet”…. >tag in the head element. This solution works fine in all browsers except IE. I am using the following code for this:

var firstCss =  styleSheets[0].ownerNode;
var defaultCss =  styleSheets[1].ownerNode;
firstCss.parentNode.insertBefore(defaultCss, firstCss);

So is there a better solution for such issue, or maybe somebody know how to make this code work under IE.

Answer 1

I solve the problem maybe not in the best way but it works. I wrote the following code:

if (document.createStyleSheet) {
  document.createStyleSheet(defaultCss.href,0);
  defaultCss.cssText = "";
} else {
  firstCss.ownerNode.parentNode.insertBefore(defaultCss.ownerNode, firstCss.ownerNode);
}

I use “defaultCss.cssText = “”;” to cleanup old CSS file, cause you can’t get ownerNode of styleSheet under IE7-8(but you can do it in IE9) and delete old style sheet. So if you even load your CSS file to first position you will still have the same on the last position and it will be prioritized. I check it works under IE 7 – 9 and other borwsers, also stylesheet doesn’t loaded from server again IE take it from cache.
hope it will be useful for someone.