How to Get the Exact Rgba Value Set Through CSS via JavaScript

How to get the exact RGBa value set through CSS via Javascript?

Mark Hubbart's comment is correct.

32-bit color breaks down into four 8-bit components, each within the range 0-255: red, green, blue, and alpha. We express the alpha, or transparency, as a fraction or percentage since it helps us decimal-brained folks get a quicker idea of just how transparent it is. It is actually better thought of as opaqueness (well, opacity) since 100% transparent is 0, not 1.

Now, given 255 is the denominator for the alpha value, there is no way to express 0.5 exactly. The value you're seeing, 0.498039, comes from the nearest fraction, 127/255 (rounded to 6 decimal places). Safari returns 0.496094 which is 127/256 rounded to 6 decimal places, and to me seems a bug since that implies 257 values. I also doubt Firefox can accurately report 0.5 unless it is rounding to only 2 decimal places.

You can work around this issue in different browsers by creating a jQuery plugin that, on first execution, checks to see what value is returned with a 50% alpha, and adjust all calculations accordingly.

parseFloat(
   $('#divWith50PercentAlphaBackgroundStyle')
      .css('background-color')
      .split(',')[3],
   10
)

Then, with this value in hand, do a switch on it against the values different browsers return, and properly convert to the closest correct value you're expecting.

In Javascript how can I set rgba without specifying the rgb?

After some playing around, and the discovery of getComputedStyle, I have put together this.

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      #element {
        background-color: rgb(10,10,10);
        background-color: rgba(10,10,10,1);
      }
    </style>
    <script type="text/javascript">      
      HTMLElement.prototype.alpha = function(a) {
        current_color = getComputedStyle(this).getPropertyValue("background-color");
        match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(current_color)
        a = a > 1 ? (a / 100) : a;
        this.style.backgroundColor = "rgba(" + [match[1],match[2],match[3],a].join(',') +")";
      }
    </script>
  </head>
  <body>
    <div id="element">
      This is some content.
    </div>
    <script type="text/javascript">
      e = document.getElementById('element');
      e.alpha(20);
    </script>
  </body>
</html>

Make sure you define in your css your values, and cascade because RGBA is CSS3.
Also see that you can pass in a number >1 for alpha and it will divide by 100 for you (I hate working with decimals when thinking percentages).
Enjoy!

How to return rgba value from window.getComputedStyle() or other function?

You can try the below generic method to parse them.

var elm1 = document.querySelector('#target1');//console.log(parseColor(elm1.style.borderColor));console.log(formatRGBA(elm1.style.borderColor));
var elm2 = document.querySelector('#target2');//console.log(parseColor(elm2.style.borderColor));console.log(formatRGBA(elm2.style.borderColor));
var elm3 = document.querySelector('#target3');//console.log(parseColor(elm3.style.borderColor));console.log(formatRGBA(elm3.style.borderColor));

function parseColor(color) {  var m = color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);  if( m) {     return [m[1], m[2], m[3], '1'];  }    m = color.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*((0.)?\d+)\s*\)$/i);  if( m) {     return [m[1], m[2], m[3], m[4]];  }}
function formatRGBA(color) {  var component = parseColor(color);  return 'rgba(' + component.join(',') + ')';}

<div id="target1" style="  width: 150px;  height:150px;  background-color:red;  border-color: rgba(0,255,0,1);   border-width: 20px;   border-style: solid;"></div><div id="target2" style="  width: 150px;  height:150px;  background-color:red;  border-color: rgba(0,255,0,0);   border-width: 20px;   border-style: solid;"></div><div id="target3" style="  width: 150px;  height:150px;  background-color:red;  border-color: rgba(0,255,0,0.5);   border-width: 20px;   border-style: solid;"></div>

IF condition with background-color in RGBA

The CSS value is returned in a particular way.

Try comparing it to: "rgba(213, 212, 212, 0.5)"

(spaces after each comma).

Since JavaScript's rounding errors are the worst, and you really don't care about the alpha, you can just cut out the part you need:

var color = document.getElementById('element').style.backgroundColor;
color = color.substring(
                          color.indexOf('(') + 1,
                          color.lastIndexOf(color[3] == 'a' ? ',' : ')')
                        );

if (color == '213, 212, 212')
{
    alert("MATCHED");
}
else
{
    alert("FAILED");
}

Works whether or not it's rgb or rgba

If the background-color is not defined as an inline-style, you might want to use:

var color = window.getComputedStyle(document.getElementById('element')).backgroundColor;

instead (of the first line in code).

How to extract r, g, b, a values from CSS color?

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

How to Get the Exact Rgba Value Set Through CSS via JavaScript