如何使用javascript删除这个头部css样式

Question

您将如何从中删除00bf00部分：

#main { background:#00bf00 00bf00 url('images/low.png') repeat;  }  

我需要动态地执行此操作，所以可能是javascript（或者其他东西，如果你有想法的话）

我不想更改代码以正确输出，只是想看看是否有办法通过添加代码片段来删除它

Answer 1

// for imported stylesheets
var cssRules = [];
for (var i = 0, il = document.styleSheets.length; i < il; i++) {
    if (document.styleSheets[0].cssRules)
        cssRules = document.styleSheets[0].cssRules;
    else if (document.styleSheets[0].rules)
        cssRules = document.styleSheets[0].rules​;
    for (var j = 0, jl = cssRules.length; j < jl; j++) {
        if (/^#main/.test(cssRules[j].cssText))
            cssRules[j].cssText = cssRules[j].cssText.replace(/[^#]00bf00/, '');
    }
}
// for style tags
​var styleTags = document.getElementsByTagName('style');
for (var i = 0, il = styleTags.length; i < il; i++) {
    styleTags[i].innerHTML = styleTags[i].innerHTML
                                         .replace(/(#main.*)[^#]00bf00/, '$1');
}​​

请参阅演示（有关样式标记）

Answer 2

您

不能直接在 head 标记中修改 CSS 属性，请尝试以下操作：

$('#main').css('background-color', "transparent");

或：

document.getElementById('main').style.backgroundColor = 'transparent';

Answer 3

正如昆汀所说，浏览器可能已经删除了这条规则，所以你不能真正编辑它。

另一方面，你可以看看客户端css解析。LESS 有一个客户端版本的 CSS 处理器，它本质上是查看可用的 CSS 源代码，并在将其返回给浏览器之前对其进行修改。LESS 源代码是开源的，所以你可以看到它是如何做到这一点的。不幸的是，对于这样的事情来说，这是一个相当复杂的过程和矫枉过正。在将 CSS 交付到浏览器之前，您最好先修复它。

Answer 4

如果您只想更改已经存在的元素的样式，那么只需执行

document.body.style.background = '#00bf00 url('images/low.png') repeat';

如果您需要更改样式本身以使其也适用于将来的元素，请使用正确的值覆盖选择器。

$('head').append('<style>#main { background:#00bf00 url('images/low.png') repeat;  }  </style>')

（此示例假定现有样式位于头部中，以便将新样式插入到现有样式之后）