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

Question

I have a div with applied some inline style as rgba(0,255,0,1) and I am using ...style.borderColor to return a string with its color value.

I have noticed if alpha channel is 1 (no transparency) the value returned is only in rgb format, if instead color applied as some transparency like rgba(0,255,0,0.5) values is returned correctly in rgba.

Do you know any way to force an rgba (with alpha) to be returned instead?
If no how could I add this value, string manipulation is a good way?

var elm = document.querySelector('#target');
console.log(elm.style.borderColor);

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

There are some interesting avenues to follow in this thread. http://stackoverflow.com/questions/11068240/what-is-the-most-efficient-way-to-parse-a-css-color-in-javascript — lonesomeday, Nov 29 '16 at 15:16
Why do you need this? If you want to modify the color, CSS Color Level 4 plans to introduce functions to modify colors. — Oriol, Nov 29 '16 at 15:47
@Radex https://drafts.csswg.org/css-color/#modifying-colors but I don't think any browser supports this already. — Oriol, Nov 29 '16 at 15:53

Aruna · Accepted Answer · 2016-11-29T15:37:41.653

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>

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

1 Answers1