作者 主題: [分享] 如何抓出元件(物件)的顏色值並做反相處理?  (閱讀 2112 次)

0 會員 與 1 訪客 正在閱讀本文。

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
本來目的是要直接用 js 抓出 div 的背景色, 然後自動反相後做為 text 的顏色值
用 jquery 的 css() 試了一下, firefox, chrome 抓出來的是 "rgb(123, 56, 45)" 這樣的『字串』
ie6,7,8, opera 抓到的則是 "#7b382d" 這樣的字串, 稍微估狗爬了一下文, 找到一些資料
整理了一下, 做兩種不同格式判斷, 在ie6,7,8, firefox, opera, chrome 都能正確做顏色值反相
傳回值是 #12cd5f 的格式..

代碼: [選擇]
var HexChar = '0123456789abcdef'.split('');
function RGB2Hex(rgb) {
  var hex = "";
  do {
    hex = HexChar[rgb % 16] + hex;
    rgb -= (rgb % 16);
    rgb /= 16;
  } while (rgb > 0) ;
 
  hex += (hex.length == 1) ? '0' : '';
  return hex;
}
function RGBcss2Hex(str) {
  var vals = str.match(/\d+/g);
  var hex = "";
  for (var i = 0; i < vals.length; i++) {
    var c = parseInt(vals[i]);
    c = (c == 0) ? '00' : c;
    hex += RGB2Hex(c);
  }
  return hex;
}

String.prototype.invertColor = function() {
  var t1 = '0123456789abcdef#';
  var t2 = 'fedcba9876543210#';
  var str = this;
 
  if (str.substr(0, 1) == '#') {
    return str.replace( /./gi, function(s) {
      return t2.charAt(t1.indexOf(s));
    });
  }
 
  var rgb = RGBcss2Hex(str);
  return '#' + rgb.replace( /./gi, function(s) {
    return t2.charAt(t1.indexOf(s));
  });
}

使用方式是直接在顏色字串後面加 .invertColor()