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

IT技术 javascript jquery hex rgb background-color
2021-02-09 00:07:14

我对 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; var b=xxx; 不知何故。

我试图用 JavaScript 谷歌解析字符串,但我并没有真正理解正则表达式的东西。

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

6个回答

试试这个:

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"]
@nickf 之前忘记感谢你了。顺便说一句,我添加/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0|0\.\d+))?\)$/|0接近尾声来检查 alpha 何时仅为 0 而不是 0.x
2021-03-15 00:07:14
部分不会是 ["rgb(0, 70, 255)","0","70","255"] 吗?
2021-04-07 00:07:14
@Neal 或其他任何有此问题的人:在 IE 中,jquery 1.4.4 返回十六进制代码而不是 rgb 字符串。所以parts为空,因为正则表达式不匹配,这会在使用parts时导致错误。我必须在删除之前添加一个检查,如果部分为空,则返回原始字符串。
2021-04-07 00:07:14
我喜欢 StackOverflow。谢谢,不想自己弄清楚这个。:-P
2021-04-10 00:07:14
@fortuneRice 我认为它应该是(1|0|0?\.d+),因为它.3是有效的。
2021-04-13 00:07:14

如果您有可用的 jQuery,这就是我刚刚想出的超级紧凑版本。

var RGBtoHEX = 函数(颜色){
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
    返回 ('0' + parseInt(digit).toString(16)).slice(-2)
  })。加入('');
};
现在我们甚至不需要 jQuery 来映射。这是香草版本:var RGBtoHEX = function(color) { return "#"+(color.match(/\b(\d+)\b/g).map(function(digit){ return ('0' + parseInt(digit).toString(16)).slice(-2) })).join(''); };
2021-04-14 00:07:14

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

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

这是有效的 CSS,别担心。


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

+1 -如果稍后必须在某个网页上恢复颜色,那么为什么要进行任何转换工作:)
2021-04-03 00:07:14

不久前我发现了另一个函数(由 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]);
}
我宁愿将函数 hex(x) 移出 fucntion rgb2hex 的范围以提高性能。无论如何,这是一个很好的干净解决方案,感谢分享。看看下面我的,我想听听你的意见。
2021-03-29 00:07:14

与 JQuery ..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};