Question

I have the following code to get the background color of an element.

var currentColor = $(this).css('background-color');

which returns something like rgb(123,123,123)

What I now want to do convert this to rgba and show it at 0.75 alpha

So returning something like rgba(123,123,123,0.75)

Any ideas?

Was it helpful?

Solution

Since jQuery always seems to return the color like rgb(r, g, b) for elements that have no alpha, you could simply use:

$(this).css('background-color').replace(')', ', 0.75)').replace('rgb', 'rgba');

Just make sure the background color isn't rgba already:

var bg = $(this).css('background-color');
if(bg.indexOf('a') == -1){
    var result = bg.replace(')', ', 0.75)').replace('rgb', 'rgba');
}

OTHER TIPS

Another regex try http://jsfiddle.net/hc3BA/

var colour = 'rgb(123,123,123)',
new_col = colour.replace(/rgb/i, "rgba");
new_col = new_col.replace(/\)/i,',0.75)');

http://regex101.com/r/lT9iM4

var re = /(rgb)\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/; 
var currentColor = $(this).css('background-color');
var subst = 'rgba($2,$3,$4,0.75'; 

$(this).css('background-color', currentColor.replace(re, subst));

Another solution using regex. But as Cerbrus mentioned, using regex for something this simple is overkill.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top