如何从CSS颜色中提取r，g，b，a值？

问题描述：

$('#my_element').css('backgroundColor')

反对这样的最简单的方法：

{ r: red_value, g: green_value, b: blue_value, a: alpha_value }

？

你想要什么语言？ – Bobby 2010-09-20 13:27:03

@Bobby：这是JavaScript（带有jQuery）。 – 2010-09-20 13:27:46

答

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]); 
}

这里试试吧http://jsbin.com/uhawa4

编辑：

var c = $('body').css('background-color'); 
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(','); 

for(var i in rgb) { 
    console.log(rgb[i]); 
}

或者更简单的方法，只是针对数字

var c = 'rgba(60,4,2,6)'; 
var rgb = c.match(/\d+/g); 

for(var i in rgb) { 
    console.log(rgb[i]); 
}

谢谢！这与我正在查找的内容非常接近:) – 2010-09-20 13:57:14

用'var rgb = c.match（/ [。？\ d] +/g）替换'var rgb = c.match（/ \ d +/g）;' ;'为了匹配rgba字符串中的字符串的浮点数，比如'rgba（60,4,2,0.3）' – 2017-09-29 15:18:57

答

假设你有下面的CSS规则：

#my_element { 
    background-color: rgba(100, 0, 255, 0.5); 
}

那么这就是你怎么能拿一个，RGBA对象：

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

答

可以看出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}

这个脚本基本上从您的hexcolor代码中获取每个颜色对（例如＃F0556A）并将其切换到in teger使用基数为16的parseInt。

将链接的重要部分归档到答案中是一种很好的形式，这样链接就不会失去其大部分价值。 – 2016-12-31 00:52:50

答

你会做这样的事情：

$.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 
    * } 
*/

很简单:)

我看到'$（'＃my_element'）.css（'backgroundColor'）'总是返回类似'rgb（123,87,92）'或'rgba（123,87,92,0.7）'的东西。它能返回类似'＃123456'或'123456'的东西吗？ – 2010-09-20 13:44:38

这并没有特别要求 – RobertPitt 2010-09-20 13:48:45

@Robert--它暗示输入的内容可能与'rgba（...）'类似，因为一个简单的十六进制值如＃6400FF不能表示不透明。 – 2010-09-20 13:54:39

答

更简单：

//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);

答

要转换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} 
*/

如何从CSS颜色中提取r，g，b，a值？

相关推荐