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

我有一个函数，用于更改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;
            }
        }
    }
}

它在IE9中工作得很好，但在Chrome和firefox中测试时，它似乎不起作用。Chrome和Firefox似乎找不到任何类或任何东西。

---

我对javascript有点陌生，因此如果您能解决这个问题或以任何方式指导我，我将不胜感激。

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

---

是针对

CSSRule

对象的Mozilla文档。

我建议使用不同的方法，而不是使用

文档。样式表

：

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

函数changeBackgroundColor（类名、值）{
var元素；
if（typeof document.getElementsByClassName=='function'）{
//现代浏览器
elements=document.getElementsByClassName（className）；
}否则{
//其他浏览器（IE）
elements=document.querySelectorAll（'.'+className）；
}
对于（var i=0；i

此外，您离更通用的函数还有一小步之遥：

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

函数更改样式（类名、样式名、值）{
var元素；
if（typeof document.getElementsByClassName=='function'）{
//现代浏览器
elements=document.getElementsByClassName（className）；
}否则{
//其他浏览器（IE）
elements=document.querySelectorAll（'.'+className）；
}
对于（var i=0；i

你有没有理由在两个不同的地方两次定义

ss

为同一件事？另外，尝试使用

document.styleSheets[i].rules[j].style.backgroundColor=value

而不是规则数组。偷偷地怀疑你在修改规则数组的副本，而不是实际数组。为什么要在循环体中重新定义

ss

？老实说，我不知道。这几乎是我的一个朋友发现的脚本。结果证明它有效，但只在IE中有效。只是尝试删除了对

ss

的重新定义。仍然有效，所以我猜这不是必要的重新定义。好吧，这个脚本做了我需要的。但它是在类中选择html元素，然后为该元素提供硬编码样式。我需要的是修改CSS文档中的类。@JeppeUdesen我能问一下为什么吗？我以前从未听说过有人需要这样做，我很好奇我正在制作一个单页模板，然后我将每个菜单点（主页、公文包、服务等）设置为在向下滚动时处于活动状态。所以基本上，当你是500px以上的时候，主菜单将有一个.activeClass，从500-1000px，下一个菜单将得到.activeClass。现在，为了让用户看到它，我将这个activeClass设置为背景色。这一切都很好，但这里是它变得棘手的地方。我做了一个自定义程序，所以买家可以轻松地自定义字体、颜色等。查看下一篇文章。问题是

$（选择器）。css（'background-color'，'#fff'）

，不起作用，因为它被硬编码到HTML元素中。这意味着当您向下滚动时，.activeClass仍将具有与以前相同的颜色，而不是用户选择的颜色。有点难以解释，会更容易展示。如果可能，发送priv消息。

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