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

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;
    }
}