Início / user-14072420

tacoshy's questions

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

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