javascript - 如何通过 JavaScript 解析和更改实时网站上 CSS 样式表的颜色？

Question

假设以下 CSS 样式表 用于实时网站。解析样式表上使用的所有颜色并使用 JavaScript 将值更改为新值的最佳方法是什么？

在这种情况下，我无法创建 CSS 类来通过纯 CSS 覆盖颜色，因此 JavaScript 是唯一的方法。没有可管理的方式来添加或编辑类。因为它们是动态的，并且在每个新产品发布时都会发生变化。并且更改应该只发生在客户端。无需存储覆盖。

目标是重新设置 UI 主题，用新的调色板覆盖现有颜色。每种旧颜色都将转换为新颜色。即#FFF -> #000 rgb(33,33,33) -> rgb(66,66,66)

.my-classdas90das {
  color: #000000;
}

.other-classAd21 {
  background: rgba(255,255,255);
  border-color: #222222;
}

.a-class438I {
  box-shadow: 1px 1px 1px rgba(44, 44, 44);
}

---

我的第一次尝试是通过以下方式循环访问属性:

document.styleSheets[1].cssRules[0].style

有没有更好的方法来做到这一点？

Answer 1

如果您可以控制样式表中的初始颜色，您可以使用 CSS custom properties并稍后在 JavaScript 中轻松更改它们。这是一个例子:

document.getElementById('change').addEventListener('click', () => {
  document.body.style.setProperty('--color1', 'red');
  document.body.style.setProperty('--color2', 'pink');
  document.body.style.setProperty('--color3', 'green');
  document.body.style.setProperty('--color4', 'purple');

});

:root {
  background: #eee;
  --color1: #555;
  --color2: rgba(255, 255, 255);
  --color3: #222222;
  --color4: rgba(44, 44, 44);
}

div,
button {
  margin: 1em;
}

.my-classdas90das {
  color: var(--color1);
}

.other-classAd21 {
  background: var(--color2);
  border: 2px solid var(--color3);
}

.a-class438I {
  box-shadow: 1px 1px 1px var(--color4);
}

<div class="my-classdas90das">
  my-classdas90das
</div>

<div class="other-classAd21">
  other-classAd21
</div>

<div class="a-class438I">
  a-class438I
</div>

<button id="change">Change Colors</button>