更改每个实例的颜色

Question

我在网站上有很多颜色,我想用usercript更改.想象一下包含1000个不同选择器的CSS文件,每个选择器都有一个颜色.那种特定的颜色是我想要改变的.该颜色的每个实例.用户必须能够动态更改颜色(如使用输入框)​​,因此使用CSS文件更改它将不起作用.

如果它有效,那么我将如何做到这一点:

$("*").replace("#00aba0","#FF0000");

00aba0是我要用FF0000替换的颜色

不幸的是,该方法不可用,但它可以像这样工作.另外,设置一个循环来做string.replace(); 不会起作用,因为它是一个论坛,当你做出新的回复时,它会删除回复框中的文字.

总结一下:

我想用另一种颜色替换颜色的每个实例.有许多实例(比方说500)这种颜色,必须改变.我无法通过替换CSS文件来更改它,并且必须动态更改它.

Answer 1

根据您的情况,这是符合您最佳利益的.

color从所有CSS类中删除,并将颜色委托给一个新的独立类,如下所示.

.header {position: relative; font-size:24px;}
.whatever {position: relative; float:right;}

.theme-default {color:#00aba0; background-color:#fff;}
.theme-highlight {color:#FF0000; background-color:#000;}

因此,对于所有元素,请使用以下类属性:

<div class="header theme-default">This is the header</div>
<div class="whatever theme-default">This is whatever</div>

然后,要立即更改主题,请使用此jQuery:

$(".theme-default").addClass("theme-highlight");

编辑:用户输入的动态颜色更改

您指定了您希望用户确定的新颜色.用户输入完全动态地改变颜色可能很棘手,但我已经做了一些阅读,我认为可以做到.

考虑这个演示.

$("#changeColor").on("click", function() {
    var newColor = $("#color").val();
    var oldColor = "#00aba0";
    $("*").css("color", function(i, val) {
        val = val.replace(/\s/g, "");
        if (val == oldColor || val == hexToRgb(oldColor)) {
            return newColor;
        }
        else {
            return val;
        }
    });
});

查看脚本,您将看到我们使用您的原始$("*")选择器.然后我们使用.css(),使第二个参数成为一个函数,该函数color根据当前参数返回一个新属性.

这里的主要障碍是我们需要将每个元素的当前CSS color与我们正在寻找的CSS 进行比较.不同的浏览器返回不同的值$("element").css("color"),因此为了将它们标准化,我使用Tim Down的hexToRgb()函数为每种颜色制作可比较的RGB值.

在小提琴中,尝试更改样式表和内联中的默认颜色,您将看到该脚本仍然有效.您必须扩展脚本,以便您可以操作oldColor变量并在需要时更改颜色.

希望这可以帮助.