<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Impossible to dynamically add style sheets in IE?</title>
<style type="text/css">
/*<![CDATA[*/
h1,h2 {
background-color: red;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i1=0;
//-------------------------
function test() {
//-------------------------
var oDiv = document.createElement('div');
// * This will crash IE after roughly 30 insertions
oDiv.innerHTML = i1+'<style type="text/css">h1{background-color:green;}</style>';
i1++;
document.body.appendChild(oDiv);
}
//-------------------------
function test_loop() {
//-------------------------
for(var j=0; j<40; j++) {
var oDiv = document.createElement('div');
// * This will crash IE after roughly 30 insertions
oDiv.innerHTML = j+'<style type="text/css">h2{background-color:blue;}</style>';
document.body.appendChild(oDiv);
}
}
// * these function simply crashes IE the same way as the non-DOM way,
// even when inserting completely blank style tags.
// So the conclusion is that IE simply can't handle the creation
// of more than ~30 style-elements, in any way?
var i2=0;
//-------------------------
function test_dom() {
//-------------------------
var oStyle = document.createElement('style');
oStyle.setAttribute('type', 'text/css');
// * this causes 'Unexpected call to method or property access' in IE... (works fine in Moz/Opera)
// oStyle.appendChild(document.createTextNode('h1{background-color:green;}'));
i2++;
document.body.appendChild(oStyle);
window.status = i2;
}
//-------------------------
function test_dom_loop() {
//-------------------------
for(var j=0; j<40; j++) {
var oStyle = document.createElement('style');
oStyle.setAttribute('type', 'text/css');
// * this causes 'Unexpected call to method or property access' in IE... (works fine in Moz/Opera)
// oStyle.appendChild(document.createTextNode('h2{background-color:blue;}'));
document.body.appendChild(oStyle);
}
}
//]]>
</script>
</head>
<body>
<h1 onclick="test()">test()</h1>
<h2 onclick="test_loop()">test_loop()</h2>
<h1 onclick="test_dom()">test_dom()</h1>
<h2 onclick="test_dom_loop()">test_dom_loop()</h2>
</body>
</html>