2012-02-01 4 views
4

はどのように私はjQueryのを使用して要素のテキストの色を反転しますか?反転テキストの色は

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

は、3進値(それは六角IIRCとして返されます)にそれを回す、色を取得し、255からあなたをこれらの値を引きますあなたのR、G、Bチャネルを持っていて、 '$ .css()'を使ってそれらを再度適用します。 – Bojangles

+2

http://webhole.net/2010/01/06/how-to-invert-an-elements-color/ –

+2

http://stackoverflow.com/questions/4766201/javascript-invert-color-on-all-要素のページ – j08691

答えて

1

まず負荷http://www.phpied.com/files/rgbcolor/rgbcolor.js

その後、colorプロパティをワード(「黒」のような)ではなくRGB値で指定されている場合これも動作するはず

$.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(); 

を行うことができます。しかし、透明性はうまくいきません。

9

少し遅く決してより良い後半:

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

ありがとう!シンプルで便利です! ヘクスを反転一つの機能を持ち、引数として渡されるいかなるメッターをRGBないために素晴らしいだろう –

1

私は偉大な '16進数のカラーインバーター' 関数は、マット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一言で言えば

関連する問題