首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >反转文本-特定元素的颜色(使用jQuery)

反转文本-特定元素的颜色(使用jQuery)
EN

Stack Overflow用户
提问于 2012-02-02 02:30:35
回答 4查看 29.8K关注 0票数 4

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

代码语言:javascript
运行
复制
<div style="color: rgb(0, 0, 0)">Invert me</div>
EN

回答 4

Stack Overflow用户

发布于 2013-03-08 18:23:38

有点晚了,但迟了总比不到好:

代码语言:javascript
运行
复制
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
);
票数 10
EN

Stack Overflow用户

发布于 2012-05-03 08:12:16

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

然后你可以这样做

代码语言:javascript
运行
复制
$.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();

当颜色属性是用一个单词(如"black")而不是RGB值指定的时候,这也应该起作用。然而,在透明的情况下,它不会很好地工作。

票数 1
EN

Stack Overflow用户

发布于 2014-07-31 17:20:22

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

代码语言:javascript
运行
复制
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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9101224

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档