javascript - 使用 JavaScript 操作 CSS

Question

我想使用 JavaScript 来操作我的 CSS。首先，它只是被认为是一个不错的小脚本，可以为我的 Accordion 菜单尝试不同的颜色以及来自输入字段的不同背景/标题-/内容-/...背景颜色。

我明白了我是如何用js获取输入值的。

我了解如何使用 getElementById()、getElementsByClassName()、getElementsByTag() 和 getElementsByName( )。

现在，问题是我的 CSS 看起来像这样:

.accordion li > a {
  /* some css here */
}
.sub-menu li a {
/* some css here */
}
.some-class hover:a {
/* css */
}
.some-other-class > li > a.active {
/* css */
}

如何使用 JavaScript 更改此类样式的属性？

Answer 1

无法直接使用 JavaScript 操作某些 CSS 样式。相反，您可以更改 stylesheet 中的规则本身，像这样:

var changeRule = function(selector, property, value) {
        var styles = document.styleSheets,
            n, sheet, rules, m, done = false;
        selector = selector.toLowerCase();
        for(n = 0; n < styles.length; n++) {
            sheet = styles[n];      
            rules = sheet.cssRules || sheet.rules;
            for(m = 0; m < rules.length; m++) {
                if (rules[m].selectorText.toLowerCase() === selector) {
                    done = true;
                    rules[m].style[property] = value;
                    break;
                }
            }
            if (done) {
                break;
            }
        }
    };
changeRule('div:hover', 'background', '#0f0');

selector 必须与现有的选择器完全匹配，只有选择器文本和 { 之间的空格会被忽略。

您可以开发代码来查找和更改选择器名称的部分命中，或者只检查特定样式表而不是所有样式表。事实上，当拥有数十个样式表和数千条规则时，它的成本也相当高。

不幸的是，伪元素无法使用此代码段进行操作。

现场演示 jsFiddle .