Question

我在网站上有很多颜色，我想用用户脚本进行更改。想象一下包含1000个不同选择器的CSS文件，每个选择器都有一个颜色。那种特定的颜色是我想要改变的。该颜色的每个实例。用户必须能够动态更改颜色（如使用输入框），因此使用CSS文件更改颜色将无法正常工作。

如果有效，那么我会这样做：

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

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

不幸的是，该方法不可用，但它会起作用。另外，设置一个循环来做string.replace（）;不会起作用，因为它是一个论坛，当你做出新的回复时，它会删除回复框中的文字。

总结：

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

Answer 1

根据您的情况，以下是您最佳兴趣的内容。

从所有CSS类中删除color，并将颜色委托给一个新的独立类，如上所述。

.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");

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

您指定了您希望用户确定的新颜色。使用用户输入完全动态地更改颜色可能很棘手，但我已经完成了一些阅读，我认为可以完成。

Consider this demo.

$("#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's hexToRgb() function为每种颜色制作了可比较的RGB值。

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

希望这有帮助。

Answer 2

一种可能的方式是使用window.getComputedStyle。例如：

获取所有页面元素
迭代，获取每个
与我们想要更改/替换的颜色进行比较
根据需要更换颜色

存在一些问题，例如getComputedStyle保留rgb(r,g,b) - 值。以下是该想法的一点示范：

演示：http://jsfiddle.net/Sg36t/ - （已更新）

一些造型：

#div1 {
 color: #ff0000; /* red in hex*/
}
#div2 {
  color : red;
}
h3#ah3 {
  color: green;
  background-color: red;
}

测试标记

<div id="div1">test</div>
<div id="div2">this is #div2
  <h3 id="ah3">text</h3>
</div>
<button id="test">change color</button>

脚本

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

function changeColor(from, to) {
   var elements = document.getElementsByTagName('*');
   for (var i=0;i<elements.length;i++) {
      var color = window.getComputedStyle(elements[i]).color;
      var hex = colorToHex(color);
      if (hex == from) {
         elements[i].style.color=to;
      }
      var backgroundColor = window.getComputedStyle(elements[i]).backgroundColor;
      if (backgroundColor.indexOf('rgba')<0) {
          var hex = colorToHex(backgroundColor);
          if (hex == from) {
             elements[i].style.backgroundColor=to;
          }
      }

   }
}   

// change all red color styled elements to blue
document.getElementById('test').onclick = function() {
   changeColor('#ff0000','#0000ff');
}

令人惊讶的是，无论red还是#ff0000，红色项目现在变为#0000ff ......

注意：这不是最终答案，或类似的东西！但我觉得这是朝着正确方向迈出的一步。至少这是一个想法：）

Answer 3

将该CSS文件的副本制作成新文件。
全新查找/替换旧颜色。
将旧样式表的引用替换为新样式

Answer 4

如果在CSS文件中设置这些颜色，那么尝试更改“每个实例”的颜色都不会很好，并且不是智能方法。

您的用户脚本可以使用GM_addStyle()动态添加样式表，这是所有主要用户脚本平台都支持的（如果不是，则很容易回填）。

由于脚本的样式表通常会在目标页面的页面之后添加，因此它自然会覆盖大多数规则。但是使用!important标志也会覆盖几乎所有内联样式属性。

在用户颜色输入的处理程序中，放置代码如下：

GM_addStyle ( "                                         \
    #node_X {                                           \
        background-color: " + usrColor + " !important;  \
    }                                                   \
    p.whatever {                                        \
        color: " + usrColor + " !important;             \
    }                                                   \
    /* etc. etc. */                                     \
" );

其中usrColor是具有用户设置值的变量。

不要忘记在脚本的元数据块中指定@grant GM_addStyle。

这种方法是“即发即弃”，新规则自动适用于所有新的AJAXed内容。它唯一不会捕获的是目标页面是否使用包含style标志的!important属性。（我从未见过工作现场）

更改每个实例的颜色

4 个答案:

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

Consider this demo.