如何从css中提取背景颜色中分离原色答案

【问题标题】：How to isolate primary colors from a background color extraction from css如何从css中提取背景颜色中分离原色
【发布时间】：2022-01-06 18:18:32
【问题描述】：

我想使用 javascript 让非画布 html 元素根据当前颜色以某种模式更改颜色

在示例中，boxyBox 的背景颜色为 rgba(100, 100, 100, 0.9)，我想更改任何 alpha 值小于 1 的元素的背景颜色

var box = document.getElementById("boxyBox");
var styleOfBox = window.getComputedStyle(box);
var colorOfBox = styleOfBox.getPropertyValue("background-color");
console.log(colorOfBox); //returns rgba(100, 100, 100, 0.9);
console.log(typeof colorOfBox); //returns string
var alphaOfBox = ???;
if(alphaOfBox < 1) {
    box.style.color = red;
}

有没有办法提取单个原色值，或者从背景颜色字符串中解析它们？

【问题讨论】：

标签： javascript css colors

【解决方案1】：

经过几个小时的摸索，我找到了这个解决方案

var box = document.getElementById("boxyBox");
var styleOfBox = window.getComputedStyle(box);
var colorArr = styleOfBox.getPropertyValue("background-color").split(", ");
var red = parseFloat(colorArr[0].match(/[\d\.]+/)[0]);
var green = parseFloat(colorArr[1]);
var blue;
var alpha;
if(typeof colorArr[3] == "string") {
    alpha = parseFloat(colorArr[3].match(/[\d\.]+/)[0]);
    blue = parseFloat(colorArr[2]);
else {
    blue = parseFloat(colorArr[2].match(/[\d\.]+/)[0]);
    alpha = 1;
}

这些变量现在对应于它们命名的主要计算机颜色，包括样式表中的非 rgba 和十进制值

【讨论】：