如何从 window.getComputedStyle() 或其他函数返回 rgba 值？答案

【问题标题】：How to return rgba value from window.getComputedStyle() or other function?如何从 window.getComputedStyle() 或其他函数返回 rgba 值？
【发布时间】：2016-11-29 15:10:03
【问题描述】：

我有一个应用了一些内联样式的 div，如 rgba(0,255,0,1)，我正在使用 ...style.borderColor 返回一个带有颜色值的字符串。

我注意到如果 alpha 通道为 1（无透明度），则返回的值仅采用 rgb 格式，如果相反，颜色应用为像 rgba(0,255,0,0.5) 这样的透明度，则在 rgba 中正确返回值。

您知道有什么方法可以强制返回 rgba（带有 alpha）吗？
如果没有，我该如何添加这个值，字符串操作是个好方法？

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

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

【问题讨论】：

在这个线程中有一些有趣的途径可以遵循。 stackoverflow.com/questions/11068240/…
为什么需要这个？如果要修改颜色，CSS Color Level 4 计划引入修改颜色的函数。
@Oriol 有趣，你能给我发个链接吗？
@Radex drafts.csswg.org/css-color/#modifying-colors 但我不认为任何浏览器已经支持这个。
@Oriol 但我想它还不可用？对吗？

标签： javascript css

【解决方案1】：

您可以尝试下面的通用方法来解析它们。

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>

【讨论】：