Question

我有一个样式框，可以将框的颜色设置为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的变量。

如果您不了解我的问题，请随时在评论部分询问。

我现在正在寻找一个不太复杂和更优雅的结构，所以这个问题不再需要答案了。我不会删除它，以防其他人提出类似的问题。

Answer 1

您可以使用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(',') + ')';

我希望这能以某种方式提供帮助。请告诉我，如果我不理解你的话。

<小时/> 对于我之前写过的不好的问题，我很抱歉 - 我仍然不能写评论：（

Answer 2

CSS变量被视为普通的CSS属性，因此您只需通过element.style正常访问它们，例如： document.documentElement.style['--variableName']。

请注意document.documentElement作为我们用来获取样式的元素的用法 - 您使用:root来定义变量，因此我们必须在根元素中查找值，其中， DOM，是文档。

如果要通过JS设置CSS变量的值，可以使用document.documentElement.style.setProperty('--variableName', value)。

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

有用的链接：

使用JavaScript更改CSS样式颜色值

2 个答案: