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

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

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


当前回答

下面是我发现的一个解决方案,它不会在IE中抛出脚本错误: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

其他回答

下面是我发现的一个解决方案,它不会在IE中抛出脚本错误: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

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

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

只有i.e.(到目前为止只测试了6个)返回十六进制值。

为了避免在i.e.中出现错误消息,你可以将函数包装在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]); 
     }
}

我的精简版

//函数将rgb颜色转换为十六进制格式 函数rgb2hex(rgb) { If (/^#/.test(rgb))返回rgb;// If返回十六进制颜色 设re = /\d+/g; 让十六进制= x = > (x > > 4) .toString (16) + (x & 0 xf) .toString (16); 返回“#”+十六进制(re.exec (rgb)) +十六进制(re.exec (rgb)) +十六进制(re.exec (rgb)); }

这是一个版本,也检查透明,我需要这个,因为我的对象是将结果插入到一个风格属性,其中十六进制颜色的透明版本实际上是“透明”字。

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     }
     else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
         return 'transparent';
     }
     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]); 
     }
}

将RGB转换为十六进制

我用的是茉莉花量角器,结果出现了一些错误 -期望['rgba(255, 255, 255, 1)']包含'#fff'。 下面的函数对我来说工作得很好。

function RGBAToHexA(test:string) {
let sep = test.toString().indexOf(",") > -1 ? "," : " ";
const rgba = test.toString().substring(5).split(")")[0].split(sep);
console.log(rgba)
let r = (+rgba[0]).toString(16),
  g = (+rgba[1]).toString(16),
  b = (+rgba[2]).toString(16),
  a = Math.round(+rgba[3] * 255).toString(16);

    if (r.length == 1)
        r = "0" + r;
    if (g.length == 1)
        g = "0" + g;
    if (b.length == 1)
        b = "0" + b;
    if (a.length == 1)
        a = "0" + a;

return "#" + r + g + b + a;

}

describe('Check CSS', function() {
 
it('should check css of login page', async function(){
        browser.waitForAngularEnabled(true);
        browser.actions().mouseMove(element(by.css('.btn-auth, .btn-auth:hover'))).perform(); // mouse hover on button
        csspage.Loc_auth_btn.getCssValue('color').then(function(color){
            console.log(RGBAToHexA(color))
            expect( RGBAToHexA(color)).toContain(cssData.hoverauth.color);

        })