背景色的十六进制JavaScript变量
-
11-07-2019 - |
题
我有点新的JavaScript和jQuery,现在我面临一个问题:
我需要一些数据发布到PHP和数据的一个比特必须是DIV X的背景颜色十六进制。
jQuery有的CSS(“背景颜色”)功能,并用它我可以得到背景成JavaScript变量的RGB值。
在CSS功能似乎返回字符串这样RGB(0,70,255)。
我找不到任何方式来获得背景色(即使它设置为CSS十六进制)的十六进制。
所以好像我需要将其转换。我发现了一个功能RGB转换为十六进制,但它需要有三个不同的变量,R,G和B被调用。所以,我需要解析字符串RGB(X,XX,XXX)到VAR R = X; VAR克= XX; VAR 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"
在响应于该问题在下面的评论:
我想修改的正则表达式来处理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"]
其他提示
如果您有jQuery的可用,这是我刚刚想出了超小型版本。
var RGBtoHEX = function(color) { return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){ return ('0' + parseInt(digit).toString(16)).slice(-2) }).join(''); };
我发现了另一个功能一段时间回来(由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]);
}
使用的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;
};
这些解决方案将在Chrome失败,它返回一个RGBA(X,X,X,X)为背景色。
编辑:这不一定是真实的。 Chrome将仍然设置使用RGB背景(),这取决于你在做什么。只要最有可能的,因为这里没有施加alpha通道,铬将与RGB代替RGBA响应。
这个怎么样的解决方案,函数的 stringRGB2HEX 强>返回其中的格式颜色所有occurencies“RGB(R,G,B)”已被取代的十六进制格式的输入字符串的副本“ #RRGGBB”。
//function for private usage of the function below
//(declaring this one in global scope should make it faster rather than
//declaraing it as temporary function inside stringRGB2HEX that need to be
//instantieted at every call of stringRGB2HEX
function _rgb2hex(rgb_string, r, g, b)
{
//VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
//toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]
return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
}
function stringRGB2HEX(string)
{
if(typeof string === 'string')
string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
return string;
}
此在一个复杂的样式还RGB颜色转换等background
一个style.background
像值:"none no-repeat scroll rgb(0, 0, 0)"
被容易地转换成由"none no-repeat scroll #000000"
简单地做stringRGB2HEX(style.background)
http://www.phpied.com/rgb-color-parser -in-的JavaScript /
接受字符串和试图找出一个有效的颜色在它外面甲JavaScript类。一些接受输入是例如:
* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
我发现这个溶液 HTTP:// haacked .COM /存档/ 2009/12 /第29 /转换-RGB到hex.aspx 和我使用它在我的项目
在这里你去,这将允许您使用$(选择).getHexBackgroundColor()轻松返回的十六进制值:
$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
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]);
}