HTML/CSS/Javascript：从我的包装器中获取“主变量”的值？ [重复]

Question

我有一个像这样的包装器（简单的代码）：

<div class="wrapper" style="--main-color: #123456;">
...
</div>

我使用“--main-color”来改变不同事物（背景、标记等）的颜色，或者说更容易一些。 在 css 中工作得非常好：

.classname {
  color: var(--main-color);
}

现在，我也想这样做： 我有 4 张不同的图像，但只应显示一张（取决于指定的颜色）

EG

#ff0000 --> <img.... src(red-img.png).../>
#00ff00 --> <img.... src(green-img.png).../>

我已经用javascript尝试过，但我绝对不知道如何获取我的属性“--main-color”的值。

我尝试过一件事，ofc 不起作用：

let color = document.documentElement.style.getPropertyValue("--main-color");

希望有人能帮我解决这个问题..

Answer 1

const wrapper = document.querySelector(".wrapper");
getComputedStyle(wrapper).getPropertyValue("--main-color");