-1

我在一个网站上有很多颜色，我想用一个 userscript来改变它们。想象一个有 1000 个不同选择器的 CSS 文件，每个选择器都有一个颜色。那个特定的颜色是我想要改变的。该颜色的每个实例。用户必须能够动态地更改颜色（例如使用输入框）​​，因此使用 CSS 文件进行更改是行不通的。

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

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

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

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

总结一下：

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

4

4 回答 4

7

根据您的情况，这将是您最感兴趣的。

从所有 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");

编辑：来自用户输入的动态颜色变化

您指定您想要由用户确定的新颜色。使用用户输入完全动态地更改颜色可能会很棘手，但我已经阅读了一些内容，我认为可以做到。

考虑这个演示。

$("#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，该函数根据当前属性返回一个新属性。

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

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

希望这可以帮助。

于 2013-09-17T18:24:14.337 回答
3

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

  1. 获取所有页面元素
  2. 迭代，获取每个的computedStyle
  3. 与我们要更改/替换的颜色进行比较
  4. 如果需要，更换颜色

存在问题，例如 getComputedStyle 持有 -values 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...

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

于 2013-09-17T19:26:01.960 回答
0
  1. 将该 CSS 文件复制到一个新文件中。
  2. 将旧颜色全局查找/替换为新颜色。
  3. 用新样式表替换对旧样式表的引用
于 2013-09-17T18:35:38.043 回答
0

如果在 CSS 文件中设置了这些颜色，则尝试更改“每个实例”的颜色不会很好，也不是明智的方法。

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

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

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

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

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

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

这种方法是“一劳永逸”，新规则自动适用于所有新的 AJAX 内容。唯一不会捕获的是目标页面是否使用style包含!important标志的属性。（我从未见过工作网站这样做）

于 2013-09-18T03:38:29.493 回答