1

我有这个函数来改变 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有点陌生，所以如果你能解决这个问题或以任何方式指导我，我将不胜感激。

4

2 回答 2

2

我会推荐一种不同的方法，而不是使用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;
    }
}
于 2012-08-02T14:03:34.747 回答
0

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

这是一个CSSRule对象的 Mozilla 文档。

于 2012-08-02T14:03:04.973 回答