如何获得十六进制颜色值而不是RGB值?

使用以下jQuery将获得元素背景色的RGB值:

$('#selector').css('backgroundColor');

有没有办法获得十六进制值而不是RGB?


var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

(资源)


以下是我根据@Matt建议编写的更清洁的解决方案:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

某些浏览器已经以十六进制形式返回颜色(如Internet Explorer 8及更低版本)。 如果您需要处理这些情况,只需在该函数内附加一个条件,如@gfrobenius建议:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

如果您使用的是jQuery并且想要更完整的方法,那么您可以使用jQuery 1.4.3以来提供的CSS Hooks,正如我在回答以下问题时所展示的那样:是否可以强制jQuery.css(“backgroundColor”)以十六进制格式返回?


大多数浏览器在使用时似乎都会返回RGB值:

$('#selector').css('backgroundColor');

只有IE(目前只有6个测试)返回十六进制值。

为了避免IE中的错误信息,你可以将函数包装在if语句中:

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?((d+),s*(d+),s*(d+)(?:,s*(d+))?)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}
链接地址: http://www.djcxy.com/p/87403.html

上一篇: How to get hex color value rather than RGB value?

下一篇: HSL to RGB color conversion