Início / coding / Perguntas / 78848851
Accepted
tacoshy
Asked: 2024-08-08 21:57:42 +0800 CST

Por que atualizar meu CSSStyleSheet existente com uma nova regra não tem efeito?

  • 772

Estou usando new CSSStyleSheet()para criar uma folha de estilo personalizada para um documento específico onde os estilos dependem do conteúdo.
Dentro dessa folha de estilo, adiciono variáveis ​​CSS com o seletor raiz. Os elementos do projeto serão então selecionados por um ID e receberão regras específicas que utilizam essas variáveis. A questão é que eu não conheço os IDs antes e, como tal, os estilos e os seletores devem ser criados dinamicamente.
Até agora funciona perfeitamente.

O problema que enfrento agora é que durante alguns eventos específicos, o valor das variáveis ​​CSS deve mudar. Tentei alterá-lo usando insertRule()com e sem índice. Eu também tentei replace()e replaceSync(). Nada alcançou o resultado desejado.

A questão agora é: como posso alterar o rootestilo desta folha de estilo?

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 respostas

  1. Best Answer

    O problema se deve à especificidade. A nova --background: blueregra está sendo aplicada, mas foi substituída pela regra existente:

    insira a descrição da imagem aqui

    A solução rápida e suja para isso seria usar !important, embora isso não seja o ideal:

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

    Uma abordagem melhor seria remover a regra original antes de adicionar a nova. Isso pode ser feito usando deleteRule(). Aqui está um exemplo prático:

    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. Você está inserindo a regra no CSSStyleSheet corretamente (você pode saber adicionando console.log(CSS.cssRules[0].cssText);ao botão clique para verificar se ela está inserida). O problema que você está tendo é que seu código está sendo inserido no index 0, ou seja, antes do seu rootRule. Esta é a posição padrão, mas você também a especifica com CSS.insertRule(newRule, 0);. E como as regras para seletores específicos em CSS são substituídas por regras posteriores dos mesmos seletores, rootRuleainda é aquela que está sendo aplicada.

    Mude para CSS.insertRule(newRule, 2);e você verá que funciona:

    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

relate perguntas