主页 / coding / 问题 / 78848851
Accepted
tacoshy
Asked: 2024-08-08 21:57:42 +0800 CST

为什么使用新规则更新我现有的 CSSStyleSheet 没有效果？

  • 772

我用它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

2 个回答

  1. Best Answer

    该问题是由于特殊性造成的。新--background: blue规则正在应用，但被现有规则覆盖：

    在此处输入图片描述

    对此的快速而肮脏的修复是使用!important，尽管这并不理想：

    const newRule = `:root {
  --background: blue !important;
}

    更好的方法是先删除原始规则，然后再添加新规则。可以使用 来完成deleteRule()。这是一个有效示例：

    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];


BUTTON.addEventListener('click', function() {
  CSS.deleteRule(0); // delete the original :root rule
  
  const newRule = `:root {
    --background: blue;
  }`
  CSS.insertRule(newRule, 0);
})
    <button id="BUTTON">Change background-color</button>

    • 2

  2. 您正在将规则正确地插入到 CSSStyleSheet 中（您可以通过添加console.log(CSS.cssRules[0].cssText);到按钮单击来检查它是否已插入来判断）。您遇到的问题是您的代码被插入到索引处0，即在您现有的之前rootRule。这是默认位置，但您也可以使用指定它CSS.insertRule(newRule, 0);。并且由于 CSS 中特定选择器的规则会被相同选择器的后续规则覆盖，因此rootRule仍然是应用的规则。

    将其更改为CSS.insertRule(newRule, 2);，你会看到它起作用了：

    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, 2);
})
    <button id="BUTTON">Change background-color</button>

    • 2

相关问题