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

我有一个应用一些内联样式的div，作为rgba(0,255,0,1)，我使用...style.borderColor返回一个带有其颜色值的字符串。如何从window.getComputedStyle（）或其他函数返回rgba值？

我注意到如果α通道是1（无透明性）的返回值是仅在rgb格式，如果在rgba正确返回代替一些透明度施加像rgba(0,255,0,0.5)值的颜色。

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

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>

来源

2016-11-29 Radex

还有一些有趣的途径，在这个线程跟随。 http://stackoverflow.com/questions/11068240/what-is-the-most-efficient-way-to-parse-a-css-color-in-javascript – lonesomeday

你为什么需要这个？如果您想修改颜色，CSS Color Level 4计划引入功能来修改颜色。 – Oriol

@Oriol有趣的，请你给我一个链接？ – Radex

你可以试试下面的通用方法来解析他们。

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>

来源

2016-11-29 15:30:34 Aruna

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

回答

相关问题