3

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

我了解如何使用 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 更改此类样式的属性？

4

3 回答 3

3

无法直接使用 JavaScript 操作某些 CSS 样式。相反，您可以更改样式表本身的规则，如下所示：

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的现场演示。

于 2013-07-03T17:26:02.040 回答
1

所有 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 属性来完成，或者如果您使用的是 jQuery：addClass和removeClass。

于 2013-07-03T16:08:06.567 回答
0

我已经用下划线实现了 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;
}
于 2014-02-08T21:58:45.097 回答