主页 / user-14072420

tacoshy's questions

Martin Hope
tacoshy
Asked: 2024-08-08 21:57:42 +0800 CST
  • 8

我用它new CSSStyleSheet()来为特定文档创建自定义样式表，其中样式取决于内容。
在该样式表中，我使用根选择器添加 CSS 变量。然后，项目中的元素将通过 ID 选择，并获取使用这些变量的特定规则。问题是，我之前不知道 ID，因此必须动态创建样式和选择器。
到目前为止，它运行完美。

我现在面临的问题是，在某些特定事件期间，CSS 变量的值应该发生变化。我尝试使用insertRule()with 和 without index 来更改它。我也尝试了replace()和replaceSync()。没有达到预期的结果。

现在的问题是，我如何改变root这个样式表？

const CSS = new CSSStyleSheet();

const rootRule = `:root{
  --background: red;
}`;
CSS.insertRule(rootRule, 0);

const bodyRule = `body { 
  background: var(--background); 
}`
CSS.insertRule(bodyRule, 1);

document.adoptedStyleSheets = [CSS];


// change color
BUTTON.addEventListener('click', function() {
  console.log('button clicked');
  const newRule = `:root {
    --background: blue;
  }`
  CSS.insertRule(newRule, 0);
})
<button id="BUTTON">Change background-color</button>

javascript