一尘不染

背景色十六进制到JavaScript变量

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在Google上解析字符串,但是我并不真正了解正则表达式。

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


阅读 380

收藏
2020-05-01

共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"

针对以下评论中的问题:

我正在尝试修改正则表达式以处理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"]
2020-05-01