使用jquery替换css中的特定颜色代码

Question

我想将#789034代码替换为另一个代码,如#456780,它使用jquery在main.css中找到它

我有一个main.css文件,如下所示:

.common-color
{
  color:#789034;
}

.new-cls
{
  border-color:#789034;
  height:300px;
}

.awesome-one
{
  background-color:#789034;
  height:200px;
  width:300px;
}

我想将#789034代码替换为另一个代码,如#456780,它使用jquery在main.css中找到它:

$(each where code=#789034)
{
  set code: #456780;
}

Answer 1

这是一个解决方案,我将逐步解释.

首先,打电话colorReplace("#789034", "#456780");.第一个值是目标颜色,第二个值是替换颜色.

在其中,$('*').map(function(i, el) {将选择DOM树中的所有标签.对于每个元素,getComputedStyle(el)返回其styles数组.您可以自定义选择器以加快处理速度(例如$('div').map(function(i, el)) {).

所有包含"颜色"的样式属性(例如background-color,-moz-outline-color等),将检查颜色值是否等于您的目标颜色.如果是这样,它将被目标颜色替换.

返回的颜色类似于rgba(0,0,0,0)或不同rgb(0,0,0),#FFFFFF因此从rgb到十六进制进行快速转换以进行比较.那就是使用内部rgb2hex()功能.

我希望这就是你要找的东西.

function colorReplace(findHexColor, replaceWith) {
  // Convert rgb color strings to hex
  // REF: https://stackoverflow.com/a/3627747/1938889
  function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }

  // Select and run a map function on every tag
  $('*').map(function(i, el) {
    // Get the computed styles of each tag
    var styles = window.getComputedStyle(el);

    // Go through each computed style and search for "color"
    Object.keys(styles).reduce(function(acc, k) {
      var name = styles[k];
      var value = styles.getPropertyValue(name);
      if (value !== null && name.indexOf("color") >= 0) {
        // Convert the rgb color to hex and compare with the target color
        if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
          // Replace the color on this found color attribute
          $(el).css(name, replaceWith);
        }
      }
    });
  });
}

// Call like this for each color attribute you want to replace
colorReplace("#789034", "#456780");

.common-color {
  color: #789034;
}
.new-cls {
  border-color: #789034;
  border-width: 4px;
  border-style: solid;
}
.awesome-one {
  background-color: #789034;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="common-color">color</div>
<div class="new-cls">border-color</div>
<div class="awesome-one">background-color</div>