如何通过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 自定义属性 ，稍后在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>