从Javascript更改CSS规则集

是否可以动态更改CSS规则集(即某些JS会在用户单击窗口小部件时更改CSS规则集)

这个特殊的CSS规则集应用于页面上的许多元素(通过类选择器),我想在用户单击小部件时修改它,以便所有具有类的元素发生更改.

1> Alex Gyoshev..：

---

你可以,但它相当麻烦.关于如何做到这一点的最佳参考是以下文章:完全Pwn CSS与Javascript(Web存档链接).

我设法让它与Firefox和IE一起工作 - 我不能在Chrome中,虽然看起来它支持DOM方法.ricosrealm报告说它也适用于Chrome.

---

在Chrome 11中测试过.效果很好.

---

链接被破坏(数据库关闭),但它看起来像[有人把它变成了一个库](http://jelo.callee.info/docs/symbols/Jelo.CSS.html#.deleteRule).

2> Jorge Gonzal..：

---

这是一个基于Totally Pwn CSS和Javascript的现代版本.这是ES6我希望不介意.

function getCSSRule(ruleName) {
    ruleName = ruleName.toLowerCase();
    var result = null;
    var find = Array.prototype.find;

    find.call(document.styleSheets, styleSheet => {
        result = find.call(styleSheet.cssRules, cssRule => {
            return cssRule instanceof CSSStyleRule 
                && cssRule.selectorText.toLowerCase() == ruleName;
        });
        return result != null;
    });
    return result;
}

此函数返回一个CSSStyleRule,您可以像这样使用:

var header = getCSSRule('#header');
header.style.backgroundColor = 'red';

document.styleSheets还列出了CSSStylesSheets对象的引用.访问页面中特定sytleSheet的其他方法是通过为html代码中的style或link元素指定id,并使用document.getElementById('my-style').sheet在javascript中获取它.这是一些有用的方法:

主要浏览器和IE9 +: insertRule(),deleteRule(),removeProperty().

主要的浏览器,Firefox？和IE9 +: setProperty().

也可以动态创建一个新的样式元素来存储动态创建的样式,我认为应该是避免冲突的方法.