样式元素上的innerHTML导致运行时错误

时间:2012-11-13 21:48:23

标签: html css innerhtml

这适用于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是抛出错误的原因。什么是使这项工作的最佳选择?我环顾四周,发现的大多数东西看起来都有些不稳定

3 个答案:

答案 0 :(得分:5)

请尝试使用cssText属性。 style.cssText = styleText;

编辑:显然,那将是style.styleSheet.cssText = styleText;。我的坏。

DEMO

答案 1 :(得分: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);
    }

这就是我最终不得不接受的。不记得我找到它的确切位置,但它确实有效。

答案 2 :(得分:0)

很高兴你找到了一个解决方案...只是出于兴趣,如果你尝试以下任何一项,你会得到什么?

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

我目前无法访问IE8用户代理进行测试,只是在思考。根据msdn,在innerHTML元素(相当荒谬地)上既不支持insertAdjacentHTML也不支持Style ...但是它确实支持replaceAdjacentText? ?像往常一样老IE。

我想另一个后备 - 只是出于想法 - 是使用:

var head = document.getElementsByTagName('head')[0];
    head.insertAdjacentHTML('<style>'+styleText+'</style>');