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

问题描述：

如何使用jQuery反转元素的文本颜色？反转特定元素的文本颜色（使用jQuery）

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

简而言之，获取颜色，将其转化为3个十进制值（它以十六进制IIRC形式返回）并从255中减去这些值。然后，您有你的R，G和B频道，你使用'。.css（）'来再次应用它们。 – Bojangles 2012-02-01 18:33:17

http://webhole.net/2010/01/06/how-to-invert-an-elements-color/ – 2012-02-01 18:33:41

http://*.com/questions/4766201/javascript-invert-color-on-all-元素一页 – j08691 2012-02-01 18:36:13

答

首先负载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值。但是，透明度不好。

答

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

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 
);

谢谢！简单而有用！将是真棒有一个函数，反转十六进制和rgb没有metter作为参数传递 – 2013-11-12 19:38:33

答

我发现了一个巨大的 '十六进制颜色变频' 功能中写道马特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

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

相关推荐