Question

所以我试图抓住HTML元素的background-color并且我遇到了问题，因为每个浏览器都希望以不同的格式返回“颜色”。 / p>

例如：

var currentColor = $(this).css('background-color');

在Chrome中你会得到类似的内容：

currentColor = 'rgba(0, 0, 0)'

而在Firfox中：

currentColor = 'transparent';

我甚至不假装知道IE会做什么。

有没有统一这个？

Answer 1

使用以下功能将任意颜色转换为 hex 颜色：
（这些是纯粹的javascript函数，而不是jQuery）
（任何 =＃FF0000，＃F00，rgb（255,0,0），红色）

function colorToHex(color) {
        if (color.substr(0, 1) === '#') { // IE
            if (color.length == 4) { // IE 7 & 8 return '#F00' instead of #FF0000
                return "#" +
                    color.charAt(1) + color.charAt(1) +
                    color.charAt(2) + color.charAt(2) +
                    color.charAt(3) + color.charAt(3);
                }
            return color;
        } else if (color.substr(0,3) === 'rgb') { // Non-IE
                var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

                var red = parseInt(digits[2]);
                var green = parseInt(digits[3]);
                var blue = parseInt(digits[4]);

                var rgb = blue | (green << 8) | (red << 16);
                return digits[1] + '#' + rgb.toString(16);
        }
        return colourNameToHex(color); // if we have color name like 'red'
}

function colourNameToHex(colour) {

        var colours = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
    "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
    "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
    "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
    "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
    "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
    "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
    "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
    "honeydew":"#f0fff0","hotpink":"#ff69b4",
    "indianred ":"#cd5c5c","indigo ":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
    "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
    "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
    "lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
    "magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
    "mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
    "navajowhite":"#ffdead","navy":"#000080",
    "oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
    "palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
    "red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
    "saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
    "tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
    "violet":"#ee82ee",
    "wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
    "yellow":"#ffff00","yellowgreen":"#9acd32"};

    if (typeof colours[colour.toLowerCase()] != 'undefined')
        return colours[colour.toLowerCase()];

    return false;
}

一个例子：

var currentColor = $(this).css('background-color');
alert( colorToHex(currentColor) );

没有 jQuery：（如果有人需要）
你必须使用下面的函数来获得确切的背景颜色 :( Source）

function rzCC(s){
  for(var exp=/-([a-z])/; exp.test(s); s=s.replace(exp,RegExp.$1.toUpperCase()));
  return s;
};

function rzGetStyle(e,a){
  var v=null;
  if(document.defaultView && document.defaultView.getComputedStyle){
    var cs=document.defaultView.getComputedStyle(e,null);
    if(cs && cs.getPropertyValue) v=cs.getPropertyValue(a);
  }
  if(!v && e.currentStyle) v=e.currentStyle[rzCC(a)];
  return v;
};

function rzGetBgColor(e){
  var v=rzGetStyle(e,'background-color');
  while (!v || v=='transparent' || v=='#000000' || v=='rgba(0, 0, 0, 0)'){
    if(e==document.body) v='#fff'; else {
      e=e.parentNode;
      v=rzGetStyle(e,'background-color');
    }
  }
  return colorToHex(v);
};

一个例子：

var myId = document.getElementById("myId");
alert( rzGetBgColor(myId) );

经测试： IE7 + ， FireFox ， Chrome ， Safari

Answer 2

您可能需要添加：

dateFormat: "d 'de' MM 'de' yy"

防止第一个零消失。结果是：

var str_rgb = (rgb.toString(16).length < 6 ) ? "0"+rgb.toString(16) : rgb.toString(16) ;

在浏览器中以一致格式获取元素背景颜色的可靠方法？

2 个答案: