Javascript 更改每个实例的颜色

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

如果成功了，我会这样做：

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

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

不幸的是，这种方法是不可用的，但它会像那样工作。另外，设置一个类似string.replace（）的循环；它不会工作，因为它是一个论坛，当你做出新的回复时，它会删除回复框中的文本

总而言之：

---

我想用另一种颜色替换一种颜色的每个实例。有很多这种颜色的例子（比如说500），必须改变。我不能用CSS文件的替换来更改它，它必须动态更改。

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

从所有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>

编辑：根据用户输入动态更改颜色 您指定希望新颜色由用户确定。通过用户输入完全动态地改变颜色可能会很棘手，但我已经读了一些书，我认为这是可以做到的

查看脚本，您将看到我们使用了原始的

$（“*”）

选择器。然后，我们使用

.css（）

，将第二个参数设置为一个函数，该函数基于当前属性返回一个新的

颜色

属性

这里的主要障碍是，我们需要将每个元素的当前CSS

颜色

与我们正在寻找的元素进行比较。不同的浏览器为

$（“元素”）.css（“颜色”）

返回不同的值，因此为了使它们正常化，我使用了为每种颜色创建一个可比较的RGB值

在fiddle中，尝试更改样式表和内联中的默认颜色，您将看到脚本仍然有效。您必须在脚本上展开，以便可以操作

oldColor

变量，并在需要时更改回颜色

希望这有帮助

将该CSS文件复制到新文件中

对旧颜色进行全局查找/替换为新颜色

用新样式表替换对旧样式表的引用

一种可能的方法是玩。例如：

获取所有页面元素

迭代，获取每个项目的computedStyle

与我们要更改/更换的颜色进行比较

如果需要，更换颜色

存在一些问题，例如getComputedStyle保持rgb（r，g，b）-值。 下面是这个想法的一个小例子：

演示：-（更新）

一些样式：

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

函数colorToHex（颜色）{
if（color.substr（0，1）=='#'）{
返回颜色；
}
变量数字=/（.*）rgb\（\d+）、（\d+）、（\d+）/.exec（颜色）；
var red=parseInt（数字[2]）；
var green=parseInt（数字[3]）；
var blue=parseInt（数字[4]）；
var rgb=blue |（green尝试更改“每个实例”的颜色不会很好地工作，如果在CSS文件中设置这些颜色，这不是明智的方法

您的userscript可以使用
GM\u addStyle（）
动态添加样式表，这是所有主要userscript平台都支持的（如果不支持，则很容易回填）

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

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

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

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


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

这种方法是“发射并忘记”，新规则会自动应用于所有新的AJAXed内容。唯一的问题是，如果目标页面使用包含
！important
标志的
样式
属性（我从未见过工作站点这样做）
您可以覆盖CSS规则：
$（'head'）。append（'*{颜色：#FF0000！重要}}）
必须动态更改。使用用户输入。你真的想在论坛回复框中输入脚本并执行它吗？！我不明白你在说什么，用户输入，那么以前的代码有什么问题吗？对不起，我误解了你说的，a.Wolff.*将选择每个类、ID和元素，然后将颜色更改为#FF0000-这不是我想要的。我想替换一种已经存在的颜色。用另一种颜色替换该颜色。因此我必须选择1000个类/ID？是的，这不起作用，正如我在OP中所写的。不过感谢你的回答。如果你正确使用CSS，那么不，你不必选择1000个类。好的。我有500个不同的IDs和500个不同的类。都有不同的名称。请不要告诉我选择所有1000个。过去几分钟回答的大多数人都没有意识到你希望用户输入新颜色，因为你的原始问题没有提到。你的原始版本说“来自用户脚本”[sic]“用户脚本”不会自动转换为“用户输入”。这并不能告诉我们太多。你试图做一些没有简单解决方案的事情并不意味着你周围的每个人都不称职。请意识到，你是免费收到建议的，你对缺乏简单解决方案感到沮丧
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');
}

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