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>

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

1 个答案: