Javascript 在前端显示CSS变量的值

我正在尝试为我的设计系统设置一个通用样式指南。我使用CSS变量来定义颜色，比如

:root { --accent: #234a32; --accent-alt:#826284 }

我想在前端显示一个正方形，在那里我可以使用变量作为背景色，但也可以在其中显示hexvalue，以便能够复制它

<div style="background-color: var(--accent)">#234a32</div>

#234a32

---

所以问题是，如何动态地显示十六进制代码（在本例中为#234a32）。

首先，您的根是错误的

:root { --accent: #234a32; --accent-alt:#826284 }

其次，您需要使用数据属性。（除非你想用janky正则表达式来找到var值）

---

如果有人回答，而且对你有效。请记住投票选它为正确答案。谢谢，这很好用！root：只是一个输入错误，我使用了正确的语法并编辑了我的问题。

<div
    style="background-color: var(--accent)"
    class="js-populate-var"
    data-var="--accent">
    <p>placeholder</p>
</div>

var els = document.querySelectorAll('.js-populate-var');

els.forEach(el => {
  el.innerHTML = getComputedStyle(el)
    .getPropertyValue(el.dataset.var);
})