3

这在 FF safari 和 chrome 中有效，但在 IE8 中导致错误

var styleText = "#" + containerElement.id + " button {background-color:" + options.bg_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open {color:" + options.txt_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open:hover {color:" + options.hvr_color + ";}";
    styleText += ".info_pane {background-color:" + options.bg_color + ";}";
    styleText += ".info_pane {color:" + options.txt_color + ";}";
    styleText += ".info_pane a {color:" + options.txt_color + ";}";
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = styleText;

innerHTML 是引发错误的原因。完成这项工作的最佳选择是什么？我环顾四周，发现的大多数东西似乎有点不稳定

4

3 回答 3

5

cssText改为尝试该属性。style.cssText = styleText;

编辑：显然，那将是style.styleSheet.cssText = styleText;. 我的错。

演示

于 2012-11-13T21:51:53.600 回答
1 
    var styleText = "#" + containerElement.id + " button {background-color:" + options.bg_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open {color:" + options.txt_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open:hover {color:" + options.hvr_color + ";}";
    styleText += ".info_pane {background-color:" + options.bg_color + ";}";
    styleText += ".info_pane {color:" + options.txt_color + ";}";
    styleText += ".info_pane a {color:" + options.txt_color + ";}";
    var style = document.createElement('style');
    style.type = 'text/css';
    if(style.styleSheet) { //IE
        style.styleSheet.cssText = styleText;
        document.getElementsByTagName('head')[0].appendChild(style);
    } else {
        style.innerHTML = styleText;
        document.getElementsByTagName('head')[0].appendChild(style);
    }

这就是我最终不得不去的。不记得我在哪里找到它，但它有效。

于 2012-11-14T01:07:14.223 回答
0

很高兴您找到了解决方案……只是出于兴趣，如果您尝试以下任何一种方法，您会得到什么？

style.innerText = styleText;
style.insertAdjacentText('beforeEnd', styleText);
style.insertAdjacentHTML('beforeEnd', styleText);
style.replaceAdjacentText('beforeEnd', styleText);

我目前无法访问 IE8 用户代理进行测试，只是在思考。根据 msdn ，样式元素既不支持innerHTML也不支持insertAdjacentHTML （相当荒谬） ......但是它确实支持replaceAdjacentText？像往常一样好的旧IE。

我想另一个后备——只是为了想法——是使用：

var head = document.getElementsByTagName('head')[0];
    head.insertAdjacentHTML('<style>'+styleText+'</style>');
于 2012-11-14T01:39:39.367 回答