如何從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值？

回答

相關問題