Question

我网站上的许多元素都使用了颜色：#FFA200，但我想用其他颜色替换它。

有没有办法用JavaScript（或其他语言，如果适合的话）将旧颜色的任何引用交换到另一个？

我知道我可以进行搜索/替换，但我不想对CSS文件进行任何实际更改。

Answer 1

使用jQuery它很简单：

  $(document).find('*').each(function() {
       if($(this).css('color') == "#ffaabb") {
            var newColor = "#990000";
            $(this).css('color', newColor);
       }
  });

修改

正如VisioN在评论中所说，浏览器返回RGB颜色而不是十六进制。我们可以这样解决：

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

  $(document).find('*').each(function() {
       if($(this).css('color') == hexToRgb("#ffaabb")) {
            var newColor = "#990000";
            $(this).css('color', newColor);
       }
  });

Answer 2

您可以使用jQuery解决此问题，请查看w3schools

示例

$(document).ready(function(){ $(this).click(function(){ $(this).css("background-color", "yellow"); }); });

Answer 3

当css文件链接到页面时，它被引用为javascript样式表对象，并且css文件中的每个定义（例如类）被引用为规则对象（cssrule或其他浏览器中的其他对象）。您可以修改规则，它只会影响当前页面，因为它在内存中被修改。如果你的意思是修改css文件，不幸的是，你不能在客户端中这样做。

Answer 4

如果可能的话，你可以在链接到这样的css文件之后在头部添加一个样式标记，这将覆盖css文件设置。

<head>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <style>         

        .existing-classname {
           background-color: #ff0000;
        }

    </style>
</head>

或第二个css文件

<head>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <link rel='stylesheet' type='text/css' href='css_newcolors.css' />
</head>

无论哪种方式，这都必须比运行脚本好得多，因为你仍然需要编写一个要应用它的元素列表，以及如果脚本被临时禁用会怎么样？

<强>更新

由于您不想搜索/替换现有的CSS规则，并且为了将工作负载保持在最低水平，另一个选择当然是在最后添加目标元素的替换颜色规则。现有的css。

这样做你不需要改变任何地方，比如html head标签或添加脚本。

使用JavaScript切换CSS颜色

4 个答案:

修改