javascript - JavaScript 变量的背景颜色十六进制

Question

我是 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;变量 g=xx；变量 b=xxx；不知何故。

我尝试在谷歌上搜索用 JavaScript 解析字符串，但我并没有真正理解正则表达式。

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

Answer 1

试试这个:

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"

回应下面评论中的问题:

I'm trying to modify the regex to handle both rgb and rgba depending which one I get. Any hints? Thanks.

我不确定它在这个问题的上下文中是否有意义(因为你不能用十六进制表示 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"]