从Javascript更改CSS规则集

Question

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

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

Answer 1

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

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

Answer 2

这是一个基于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().

<stye id="my-style" ...
....
var myStyle = document.getElementById('my-style').sheet
myStyle.insertRule('#header { background: red; }', 0);

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

Answer 3

您可以按如下方式在文档样式表中编辑 CLASS

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
     .style.background= 'red';

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
     .style.background= 'red';

function edit() {
  [...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
    .style.background= 'red';
}

.box {
  margin: 10px;
  padding: 10px;
  background: yellow;
}