I am creating a style element and I need to put some CSS into it. The below code works in Chrome, Safari and FF, but fails in IE8:
var styleElement = document.createElement("style");
styleElement.type = "text/css";
styleElement.innerHTML = "body{background:red}";
document.head.appendChild(styleElement);
In IE8, the code fails when it comes to the innerHTML part. I've tried doing:
var inner = document.createTextNode("body{background:red}");
styleElement.appendChild(inner);
But this also fails with "Unexpected call to method or property access." I'm looking for a workaround or fix.
Use .styleSheet.cssText
NOTE: this seems to be REALLY slow in IE8 compared to modifying individual elements style.
Is there a faster way to modify style sheets dynamically in IE?
This is slow in IE8:
styleElement.styleSheet.cssText = "body{background:red}";
This is also slow in IE8 (assumes the style object to be modified is the 1st style element in the head):
document.styleSheets[0].cssText = "body{background:red}";
This is fast in IE8:
document.body.style.background = "red";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With