反转特定元素的文本颜色（使用 jQuery）答案

【问题标题】：Invert text-color of a specific element (using jQuery)反转特定元素的文本颜色（使用 jQuery）
【发布时间】：2012-02-24 10:50:50
【问题描述】：

如何使用 jQuery 反转元素的文本颜色？

<div style="color: rgb(0, 0, 0)">Invert me</div>

【问题讨论】：

简而言之，获取颜色，将其转换为 3 个十进制值（返回为十六进制 IIRC），然后从 255 中减去这些值。然后您拥有 R、G 和 B 通道并使用 @ 987654324@ 再次申请。
webhole.net/2010/01/06/how-to-invert-an-elements-color
stackoverflow.com/questions/4766201/…
@JamWaffles 您应该将此作为答案。但是你真的需要整个 jQuery 库来完成这个简单的任务吗？可能是这样的：document.getElementById('').style.color = invert(0, 0, 0); function invert(r, g, b){r = 255-r, g = 255-g, b=255-b; return {'r':r,'g':g,'b':b}}
@Relic 好点。当然不使用 jQuery 也可以，但是 OP 正在使用它，所以在这种情况下使用 jQuery 会更好一些，尽管它唯一更容易的是元素选择。

标签： javascript jquery colors

【解决方案1】：

有点晚，但迟到总比没有好：

function invert(rgb) {
  rgb = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
  for (var i = 0; i < rgb.length; i++) {
    rgb[i] = (i === 3 ? 1 : 255) - rgb[i];
  }
  return rgb;
}

console.log(
  invert('rgba(255, 0, 0, 0.3)'), // 0, 255, 255, 0.7
  invert('rgb(255, 0, 0)'), // 0, 255, 255
  invert('255, 0, 0'), // 0, 255, 255
  invert(255, 0, 0) // 0, 255, 255
);

【讨论】：

【解决方案2】：

第一次加载http://www.phpied.com/files/rgbcolor/rgbcolor.js

那你就可以了

$.fn.invertElement = function() {
  var prop = 'color';

  if (!this.css(prop)) return;

  var color = new RGBColor(this.css(prop));
  if (color.ok) {
    this.css(prop, 'rgb(' + (255 - color.r) + ',' + (255 - color.g) + ',' + (255 - color.b) + ')');
  }
};

$('div').invertElement();

当使用单词（如“黑色”）而不是 RGB 值指定颜色属性时，这也应该有效。但是，它不适用于透明度。

【讨论】：

【解决方案3】：

我发现了一个由 Matt LaGrandeur (http://www.mattlag.com/) 编写的很棒的“十六进制颜色反转器”函数

function invertHex(hexnum){
  if(hexnum.length != 6) {
    console.error("Hex color must be six hex numbers in length.");
    return false;
  }

  hexnum = hexnum.toUpperCase();
  var splitnum = hexnum.split("");
  var resultnum = "";
  var simplenum = "FEDCBA9876".split("");
  var complexnum = new Array();
  complexnum.A = "5";
  complexnum.B = "4";
  complexnum.C = "3";
  complexnum.D = "2";
  complexnum.E = "1";
  complexnum.F = "0";

  for(i=0; i<6; i++){
    if(!isNaN(splitnum[i])) {
      resultnum += simplenum[splitnum[i]]; 
    } else if(complexnum[splitnum[i]]){
      resultnum += complexnum[splitnum[i]]; 
    } else {
      console.error("Hex colors must only include hex numbers 0-9, and A-F");
      return false;
    }
  }

  return resultnum;
}

来源在这里： http://www.mattlag.com/scripting/hexcolorinverter.php

【讨论】：

【解决方案4】：

对于较新的浏览器 (>2016)，由于 CSS filter 属性，无需进行任何额外计算。将值设置为invert(1) 将反转前景色。

MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert

$('#invert-me').css({ filter: 'invert(1)' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="invert-me" style="color: rgb(0, 255, 0);">Invert me (Opposite of green is magenta)</div>

【讨论】：