Question

我正在寻找一种方法来更改加载到网站的样式表中的每种颜色实例。我正在使用Prestashop，正在使用大型主题样式表和模块的样式表...因此，我希望更改字体颜色和背景颜色。是的，我可以进行搜索和替换...但是我想拥有可在多个站点，多个文件和主题上使用的可重用代码。

我一直在这里查看大量文章，找到了一些代码，该代码选择所有加载的元素并检查ComputedStyle，如果它等于一个值，则将其更改为新值。

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('*');
   var to = '#babaff';
   var from = '#f66685';

   for (var i=0;i<elements.length;i++) {
      var color = window.getComputedStyle(elements[i]).color;
      var hex = colorToHex(color);
      console.log('color=' ,color, elements[i]);
      if (hex == from) {
         elements[i].style.color=to;
         console.log('its a color match!', elements[i]);
      }
       var backgroundColor = window.getComputedStyle(elements[i]).background;
       console.log('bgcolor=' ,backgroundColor);
       if (backgroundColor.indexOf('rgba')<0) {
           var hex = colorToHex(backgroundColor);
           if (hex == from) {
              elements[i].style.backgroundColor=to;
           }
         }

   }
}

它部分起作用，但似乎不适用于条件值……如悬停或活动状态。因此，理想情况下，我只是在寻找可以找到文本字符串（十六进制代码）并将其更改为...的东西，它不在乎元素是什么（类，标签，id）并且无关紧要规则（背景，背景色，颜色，边框等），因为这些主题是预先构建的且未标准化。

Answer 1

如您所说：

“理想情况下，我只是在寻找可以找到文本字符串（十六进制代码）并将其更改的内容”

基本上，这就是搜索和替换的作用。（除了十六进制的东西）

如果您正在寻找一个问题，例如替换整个样式中的单一颜色，并且这是非常耗时的atm，那么您可能做错了事。

正如@delinear在他的评论中提到的那样，您可能想要使用Sass脚本。

在css已加载之后，使用一些javascript更改所有颜色会增加性能，而不是真正的实现方法。我真的建议使用Search＆Replace，然后再使用sass变量。（如果您可能想再次更改颜色）

您可以做类似的事情

$color: #ff00ff;

h1{
  background-color: $color;
}

h2{
  color: $color;
}

h3{
  background: linear-gradient(135deg, red, $color);
}

h2:hover{
  color: $color;
}

Javascript更改样式表中的值

1 个答案: