Question

我正在寻找一种方法，在不查看特定元素的情况下使用js获取页面的css，然后针对不同元素更改CSS规则而不是CSS。

例如，假设我想将具有蓝色bg的所有元素的背景颜色更改为红色，之后可能会创建一些新元素。我想找到所有带有蓝色bg的css类并将它们更改为红色。 document.styleSheets似乎没有那么好用：

对于这个页面，我在控制台中尝试了这个。它没有记录任何东西。

var logAttr = function(classes){
    if(classes !== null){
        for(var i = 0; i < classes.length; i++) {
            for(var attr in classes[i].style){
                console.log(attr);
            }
        }
    }
};

for(var sheets_idx = 0; sheets_idx < document.styleSheets.length; sheets_idx++){
    logAttr(document.styleSheets[sheets_idx].rules);
    logAttr(document.styleSheets[sheets_idx].cssRules);
}

document.styleSheets[0].rules和document.styleSheets[0].document.styleSheets为空...

Answer 1

我确定样式表确实运行良好，可能您只是没有设法使您的示例正常工作：请查看this。

var sheet = (function() {
    // Create the <style> tag
    var style = document.createElement("style");

    // Add a media (and/or media query) here if you'd like!
    // style.setAttribute("media", "screen")
    // style.setAttribute("media", "only screen and (max-width : 1024px)")

    // WebKit hack :(
    style.appendChild(document.createTextNode(""));

    // Add the <style> element to the page
    document.head.appendChild(style);

    return style.sheet;
})();

为您创建一个样式表，并提供适合您的所有正确条件。现在，要以字符串形式插入规则，您只需使用此内容：

sheet.insertRule('div {position: absolute; top:0px; width:10vh; height:10vw;}')

如果您只想将规则添加到现有规则集：

sheet.addRule('div', 'background-color: red');

如果您想使用自定义函数执行此操作，只需使用某些参数调用sheet.addRule：

function add(query, property){

    //don't forget that you need to have already created the sheet!
    sheet.addRule(query, property);
}

查询可以是通过css访问的任何内容：.class, #id, h1, #id > h1 > .class

使用javascript获取和更改CSS属性，而无需查看特定元素

1 个答案: