使用JavaScript更改CSS样式颜色值

我有一个框，其样式将框的颜色设置为

var（--box color）

。该变量在单独的CSS文件中定义，我将其用于常量等：

:root{
--box-color: rgba(250,250,250,1.0);
}

我想使用JavaScript使框的颜色变浅。我可以使用

box.style.filter=brightness（…）

应用亮度过滤器，但这似乎不是很优雅，而且盒子中也有不应该受到调光影响的子对象，这不是我的选择。有没有一种方法可以使用JavaScript更改特定的颜色值，并使用可变的初始值？比如：

box.style.backgroundColor.r -= 10;
box.style.backgroundColor.g -= 10;
box.style.backgroundColor.b -= 10;

---

如果颜色由

rgba（r，g，b，a）

语句定义，我也可以用字符串分隔，但它是用变量定义的，我也不知道如何用JS获取该变量的值

如果你不理解我的问题，请在评论部分提问

---

---

我现在想要一个不那么复杂、更优雅的结构，所以这个问题不再需要答案了。不过，我不会删除它，以防其他人遇到类似问题。

您可以使用javascript获取颜色值，并将其拆分为

r

、

g

、

b

和

a

颜色，例如：

let rgba = box.style.backgroundColor.match(/[\d\.]{1,3}/g);
// r === rgba[0]
// g === rgba[1]
// b === rgba[2]
// a === rgba[3]

然后，只需编辑rgba（）值并将其转换回原始字符串：

rgba[3] -= 0.1

box.style.backgroundColor = 'rgba(' + rgba.join(',') + ')';

我只是希望这能有所帮助。如果我不理解你的意思，请告诉我。

---

---

很抱歉我以前写了一个糟糕的问题，我仍然不能写评论：（

CSS变量被视为正常的CSS属性，因此您可以通过

元素.style

正常访问它们，例如

文档.documentElement.style['--variableName']

注意

document.documentElement

作为我们用来获取样式的元素的用法-您使用

：root

来定义变量，因此我们必须在根元素处查找值，在DOM中，根元素就是文档

如果要通过JS设置CSS变量的值，可以使用

document.documentElement.style.setProperty（'--variableName'，value）

在这种情况下，您可以添加一些不同的CSS变量来存储新的颜色值，或者编辑现有的颜色值以满足您当前的需要

有用链接：

---

“如果颜色是由rgba（r、g、b、a）语句定义的，但它是由变量定义的，我也可以用字符串分隔来实现。”，感谢您的努力，但这对我的情况没有帮助。事实上，尽管这不是我问题的解决方案，但它帮助我应用macbem的解决方案。我不想更改变量本身，我想更改颜色，它将变量作为初始值保存。我可以创建一个新的更改的

rgba（）

，并将颜色设置为该值。但要做到这一点，我必须让JS知道颜色使用的是什么变量（我可能会在CSS中更改它），但如果我在JS中选中

box.style.backgroundColor

的值，我会得到一个空字符串，而不是

var（--whatevervariablethereis）