背景颜色十六进制到JavaScript变量

我是JavaScript和jQuery的新手,现在我遇到了一个问题:

我需要将一些数据发布到PHP,并且一位数据需要是div X的背景颜色十六进制.

jQuery具有css("background-color")函数,通过它我可以将背景的RGB值变为JavaScript变量.

CSS函数似乎返回一个像这个rgb(0,70,255)的字符串.

我找不到任何方法来获得背景颜色的十六进制(即使它在CSS中设置为十六进制).

所以我似乎需要转换它.我发现了一个将RGB转换为十六进制的函数,但需要使用三个不同的变量r,g和b来调用它.所以我需要将字符串rgb(x,xx,xxx)解析为var r = x; var g = xx; var b = xxx; 不知何故.

我试图用JavaScript解析字符串,但我并不真正了解正则表达式的事情.

有没有办法将div的背景颜色作为十六进制,或者可以将字符串转换为3个不同的变量？

1> nickf..：

---

试试这个:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

针对以下评论中的问题:

我正在尝试修改正则表达式以处理rgb和rgba,具体取决于我得到的那个.任何提示？谢谢.

我不确定它是否在这个问题的上下文中是有意义的(因为你不能用十六进制表示rgba颜色),但我想可能还有其他用途.无论如何,您可以将正则表达式更改为:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

示例输出:

var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]

---

我喜欢StackOverflow.谢谢,我不想自己解决这个问题.:-P

---

部件不是["rgb(0,70,255)","0","70","255"]？

---

@Neal或其他任何有此问题的人:在IE中,jquery 1.4.4返回十六进制代码而不是rgb字符串.因此,部分为空,因为正则表达式不匹配,这会在使用部件时导致错误.我必须在删除之前添加一个检查,如果parts为null,则返回原始字符串.

---

@nickf以前忘记了谢谢你.顺便说一下,我添加了`/^rgba？\((\\ +),\ s(/ d +),\ s*(\ d +)(？:,\ _s*(1 | 0 | 0 \.\ d +))？ \)$ /```0`在结尾附近检查alpha只是0而不是0.x

---

@fortuneRice我认为它应该是`(1 | 0 | 0？\.d +)`,因为`.3`是有效的.

2> Fotios..：

---

如果你有jQuery可用,这是我刚刚提出的超紧凑版本.

var RGBtoHEX = function(color) {
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
    return ('0' + parseInt(digit).toString(16)).slice(-2)
  }).join('');
};

3> lpfavreau..：

---

您也可以使用rgb设置CSS颜色,例如:

background-color: rgb(0, 70, 255);

它是有效的CSS,不用担心.

---

编辑:如果您绝对需要,请参阅nickf答案以获得转换它的好方法.

4> Mottie..：

---

我发现了另一个功能(R0bb13).它没有正则表达式,所以我不得不从nickf借用它以使其正常工作.我只发布它,因为它是一个有趣的方法,不使用if语句或循环来给你一个结果.此脚本还返回带有#的十六进制值(我当时正在使用的Farbtastic插件需要它)

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

注意:nickf脚本的十六进制结果应该是0046ff而不是0070ff,但没什么大不了的:P

更新,另一种更好的替代方法:

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]);
}