时间戳

首页 > 解决方案 > Javascript更改样式表中的值

javascript - Javascript更改样式表中的值

问题描述

我正在寻找一种方法来更改加载到站点中的样式表中颜色的每个实例。我正在使用 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）并且没关系规则（背景、背景颜色、颜色、边框等），因为这些主题是预先构建的且未标准化。

标签： javascriptjquerycss

解决方案

正如你所说：

“理想情况下，我只是在寻找能够找到一串文本（十六进制代码）并将其更改出来的东西”

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

如果你正在寻找一个问题，比如在你的整个风格中替换一种颜色，并且它非常耗时 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;
}

推荐阅读