Question

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

我注意到，如果alpha通道为1（无透明度），则返回的值仅为rgb格式，如果应用了颜色，因为在{{1}中正确返回了rgba(0,255,0,0.5)值之类的透明度}。

您是否知道有任何方法可以强制退回rgba（使用alpha）？
如果没有我怎么能添加这个值，字符串操作是一个好方法吗？

rgba

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

Answer 1

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

＆＃13;

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(',') + ')';
}

＆＃13;

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

＆＃13;

如何从window.getComputedStyle（）或其他函数返回rgba值？

1 个答案: