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

我正在寻找一种方法，无需查看特定元素即可获取页面的CSS，然后更改CSS规则而不是CSS 。使用javascript获取和更改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是空...

来源

2014-10-19 Guig

为什么不'document.styleSheets'似乎工作那么好？你尝试了什么？ – Rudie 2014-10-19 04:18:16

我敢肯定，样式也很好地工作，也许你只是没能得到您的例子的工作：看一看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

来源

2014-10-19 14:03:27 towc

感谢您对如何更改CSS规则的明确答案！这似乎是'document.styleSheets'不工作的原因在这里讨论[链接]（http://stackoverflow.com/questions/5678040/cssrules-rules-are-null-in-chrome） – Guig 2014-10-19 17:01:01

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

回答

相关问题