使用 JavaScript 操作 CSS答案

【问题标题】：Manipulating CSS with JavaScript使用 JavaScript 操作 CSS
【发布时间】：2013-07-03 15:58:29
【问题描述】：

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

我了解如何使用 js 获取输入值。

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

现在，问题是我的 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 更改此类样式的属性？

【问题讨论】：

css 未被getElementById() getElementsByClassName() getElementsByTag() getElementsByName() 操作
这是一个完全没有意义的问题。这就是 css 的用途，为什么要另辟蹊径？
如果你想操作样式表，你最好从阅读styleSheets开始。
更清楚一点：我知道如何使用 getElement(s)By... 操作我的 css 属性，只要它们不是上面的示例。我将如何使用 js 更改（例如：）“子菜单 li a”的背景颜色？

标签： javascript css

【解决方案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 必须与现有选择器完全匹配，只有选择器文本和 { 之间的空格会被忽略。

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

不幸的是，这个 sn-p 无法操作伪元素。

jsFiddle 的现场演示。

【讨论】：

非常感谢Teemu，这正是我的想法！

【解决方案2】：

所有 DOM 元素都有一个样式对象，可以通过 JavaScript 更改

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style?redirectlocale=en-US&redirectslug=Web%2FAPI%2Felement.style

或者，如果您使用的是 jQuery：

http://api.jquery.com/css/

您可以定位元素并操纵它们的属性，但您不要更改规则。

如果你想改变大量的样式属性，一个常见的方法是改变元素的类名来改变它们的外观。这可以通过className property 来完成，或者如果您使用的是jQuery：addClass 和removeClass。

【讨论】：

【解决方案3】：

我已经用下划线实现了 Teemu 的答案。 http://jsfiddle.net/6pj3g/4/

var rule = _.chain(document.styleSheets)
    .map(function(sheet){return _.flatten(sheet.cssRules)})
    .flatten()
    .unique()
    .find(function(rule){ return rule && rule.selectorText && (rule.selectorText.toLowerCase() === selector.toLowerCase())})
    .value()

if (rule){
    rule.style[property] = value;
} else {
    throw 'selector not found: ' + selector;
}

【讨论】：