如何從CSS顏色中提取r，g，b，a值？

Question

什麼是改造

$('#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

假設你有下面的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] 
} 

Answer 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。

Answer 4

你會做這樣的事情：

$.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 5

更簡單：

//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 6

要轉換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} 
*/