JavaScript变量的背景颜色十六进制 [英] Background-color hex to JavaScript variable

问题描述

我对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个不同的变量？

<解决方案

  var rgbString =rgb（ 0，70，255）; //以任何方式获取此信息。 
 
 var parts = rgbString.match（/ ^ rgb\（（\ d +），\ s *（\ d +），\ s *（\ d +）\）$ /）; 
 // parts现在应该是[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？\（（\\ \ 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] 
  

I'm kind of new to JavaScript and jQuery and now I'm facing a problem:

I need to post some data to PHP and one bit of the data needs to be the background color hex of div X.

jQuery has the css("background-color") function and with it I can get RGB value of the background into a JavaScript variable.

The CSS function seems to return a string like this rgb(0, 70, 255).

I couldn't find any way to get hex of the background-color (even though it's set as hex in CSS).

So it seems like I need to convert it. I found a function for converting RGB to hex, but it needs to be called with three different variables, r, g and b. So I would need to parse the string rgb(x,xx,xxx) into var r=x; var g=xx; var b=xxx; somehow.

I tried to google parsing strings with JavaScript, but I didn't really understand the regular expressions thing.

Is there a way to get the background-color of div as hex, or can the string be converted into 3 different variables?

解决方案

try this out:

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"

In response to the question in the comments below:

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

I'm not exactly sure if it makes sense in the context of this question (since you can't represent an rgba color in hex), but I guess there could be other uses. Anyway, you could change the regex to be like this:

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

Example output:

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变量的背景颜色十六进制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！