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

标签 javascript jquery hex rgb background-color

我是 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 个不同的变量?

最佳答案

试试这个:

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

关于javascript - JavaScript 变量的背景颜色十六进制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/638948/

相关文章:

javascript - 以有效的方式检查多个变量是否不为 null、undefined 或 empty

java - 需要知道以下给定格式的数字格式

javascript - 如何创建具有已定义值类型的空对象

javascript - 为什么这可以作为内部脚本工作,但当您使用外部 javascript 文件时却不能工作

Jquery - 单击按钮时将表单上方的元素添加到另一个 div

javascript - 在浏览器中的选项卡之间切换时停止计时器

c++ - 将\x00 写入文件

c++ - 将十六进制键值转换为十进制键值

php - UTC 时钟基于服务器时间吗?

javascript - 如何使用 ASP.NET 向 Web 用户显示本地化的日期和时间信息