javascript 如何从 CSS 颜色中提取 r、g、b、a 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3751877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extract r, g, b, a values from CSS color?
提问by Misha Moroshko
What would be the easiest way to transform
什么是最简单的转型方式
$('#my_element').css('backgroundColor')
to object like this:
像这样反对：
{ r: red_value, g: green_value, b: blue_value, a: alpha_value }
?
?
回答by
var c = $('body').css('background-color');
var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
Try it here http://jsbin.com/uhawa4
Edit:
编辑：
var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for(var i in rgb) {
console.log(rgb[i]);
}
or even simpler way, just aiming at numbers
甚至更简单的方法，只针对数字
var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);
for(var i in rgb) {
console.log(rgb[i]);
}
回答by RobertPitt
You would do something like:
你会做这样的事情：
$.fn.ToRgb = function()
{
if(this.charAt(0) == "#"){this = this.substring(1,7);} //remove the #
return {
R : parseInt(this.substring(0,2) ,16),
G : parseInt(this.substring(2,4) ,16),
B : parseInt(this.substring(4,6) ,16),
}
}
RGB = $('#my_element').css('backgroundColor').ToRgb();
/*
* console.log(rgb) =>
* {
* R: X
* G: X
* B: X
* }
*/
Pretty simple :)
很简单:)
回答by Matt Ball
Say you have the following CSS rule:
假设您有以下 CSS 规则：
#my_element {
background-color: rgba(100, 0, 255, 0.5);
}
Then this is how you could get an RBGA object:
那么这就是你如何获得一个 RBGA 对象：
var colorStr = $('#my_element').css('backgroundColor'); // "rgba(100, 0, 255, 0.5)"
// using string methods
colorStr = colorStr.slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')')); // "100, 0, 255, 0.5"
var colorArr = colorStr.split(','),
i = colorArr.length;
while (i--)
{
colorArr[i] = parseInt(colorArr[i], 10);
}
var colorObj = {
r: colorArr[0],
g: colorArr[1],
b: colorArr[2],
a: colorArr[3]
}
回答by Rakward
As seen here:
如这里所见：
R = hexToR("#FFFFFF");
G = hexToG("#FFFFFF");
B = hexToB("#FFFFFF");
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
This script basically takes each color pair from your hexcolor code (for example #F0556A) and switches it to a integer using parseInt with base 16 .
该脚本基本上从您的十六进制颜色代码（例如#F0556A）中获取每个颜色对，并使用 parseInt 将其切换为整数 16 。
回答by fitorec
More simple:
更简单：
//javascript code
var color = $('#my_element').css('backgroundColor');
var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var r = rgb[1],
g = rgb[2],
b = rgb[3];
console.log('Red :' + r);
console.log('Green:' + g);
console.log('Blue :' + b);
回答by Ali Mousavi
To convert rgba string to object with keys:
要将 rgba 字符串转换为带键的对象：
convertRGBtoOBJ(colorString)
{
const rgbKeys = ['r', 'g', 'b', 'a'];
let rgbObj = {};
let color = colorString.replace(/^rgba?\(|\s+|\)$/g,'').split(',');
for (let i in rgbKeys)
rgbObj[rgbKeys[i]] = color[i] || 1;
return rgbObj;
}
console.log(convertRGBtoOBJ('rgba(23,54,230,0.5)'))
/*
Object {r: "23", g: "54", b: "230", a: 0.5}
*/
回答by Ali Mousavi
Simple function to extract the RGB numeric values
提取RGB数值的简单函数
function extractRgb (css) {
return css.match(/[0-9.]+/gi)
}
console.log(extractRgb('rgb(255, 255, 255)'))
console.log(extractRgb('rgba(255, 255, 255, 0.7)'))