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');
}

See demo（用于样式标签）

Answer 2

您无法直接在head标记内修改css属性，请尝试以下方法：

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

或：

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

Answer 3

正如Quentin所说，浏览器可能已经删除了此规则，因此您无法真正编辑它。

另一方面，您可以查看客户端css解析。 LESS有一个客户端版本的CSS处理器，它主要查看可用的CSS源代码，并在将其返回浏览器之前对其进行修改。 LESS源代码是开源的，因此您可以看到它是如何做到这一点的。不幸的是，这是一个相当复杂的过程，对于这样的事情来说太过分了。在将CSS传送到浏览器之前修复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>')

（此示例假设现有样式位于头部，以便在现有样式之后插入新样式）

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

4 个答案:

See demo（用于样式标签）