Question

我有这个功能来改变CSS类的背景颜色。

function changeBackgroundColor(className, value){
    var ss = document.styleSheets;
    for (var i=0; i<ss.length; i++) {
        var ss = document.styleSheets;
        var rules = ss[i].cssRules || ss[i].rules;
        for (var j=0; j<rules.length; j++) {
            if (rules[j].selectorText === className) {
                rules[j].style.backgroundColor = value;
            }
        }
    }
}

用它调用它，

changeBackgroundColor(".menuActive", "#fff");

它在IE9中完美运行，但在Chrome和Firefox中进行测试时，它似乎没有用完。 Chrome和Firefox似乎没有找到任何类或任何东西。我对javascript有点新鲜，所以如果你能解决这个问题或以任何方式指导我，我会很感激。

Answer 1

我建议采用不同的方法，而不是使用document.styleSheets：

function changeBackgroundColor(className, value){
    var elements;
    if (typeof document.getElementsByClassName === 'function') {
        // modern browsers
        elements = document.getElementsByClassName(className);
    } else {
        // other browsers (IE)
        elements = document.querySelectorAll('.' + className);
    }

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = value;
    }
}

此外，您距离更通用的功能还有一小步：

function changeStyle(className, styleName, value){
    var elements;
    if (typeof document.getElementsByClassName === 'function') {
        // modern browsers
        elements = document.getElementsByClassName(className);
    } else {
        // other browsers (IE)
        elements = document.querySelectorAll('.' + className);
    }

    for (var i = 0; i < elements.length; i++) {
        elements[i].style[styleName] = value;
    }
}

Answer 2

Internet Explorer支持的规则界面与其他浏览器支持的规则界面不同。例如，规则对象没有“selectorText”属性。

Here是CSSRule对象的Mozilla文档。

动态修改CSS - 适用于IE9，但不适用于Chrome和Firefox

2 个答案: