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

什么是最简单的转型方式

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

像这样的对象：

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

？

Answer 1

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

Answer 2

你会做的事情如下：

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

很简单:)

Answer 3

假设您有以下CSS规则：

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

那么这就是你如何得到一个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] } 

Answer 4

更简单：

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

Answer 5

要使用键将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} */ 

Answer 6

如下所示：

 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），并使用带有基数16的parseInt将其切换为整数。