javascript - 在不查看特定元素的情况下使用 javascript 获取和更改 CSS 属性

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