6

Se eu tenho a seguinte tag style:

<style>
 body{
  color:red;
}
</style>

Seria possível adicionar mais uma nova regra de css como dentro desse style através do Javascript?

Por exemplo, quero adicionar isso ao final do primeiro style que dei como exemplo:

.class-x {
     color:yellow;
}
8
  • Da pra fazer usando um append do jQuery, não? Meio trash, mas funciona 14/12/2015 às 16:58
  • 1
    Teoricamente, você pode usar document.styleSheets mas provavelmente tem um jeito mais prático (com hierarquia de CSS, talvez) de fazer o que você quer. Dá pra explicar melhor qual o objetivo? Ou é só curiosidade?
    – Gabe
    14/12/2015 às 17:01
  • 1
    Qual o objetivo? Tem algum exemplo que necessite dessa logica?
    – RBoschini
    14/12/2015 às 17:02
  • @Gabe curiosidade. Alguns não vêem utilidade, mas não é questão de ser útil. Só quero aprender mesmo se tem uma forma. Depois desse comentário alguém deve querer me dar negativos :) 14/12/2015 às 17:02
  • Obrigado @Gabe! Achei isso aqui na referência que você mandou developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… 14/12/2015 às 17:04

1 Resposta 1

7

O @Gabe deu uma referência na qual, depois de testado, comprovei que funciona (pelo menos no Google Chrome 46).

É através do método insertRule, presente em CSSStyleSheet.

Para acessá-lo, você deve acessar a lista de elementos style da página.

Nesse caso vou pegar o primeiro:

var css = document.styleSheets[0]

Em seguida inserimos a regra nesse style:

css.insertRule('body{ color: green; }', 0);
1
  • a algum tempo atrás, fiz uso do css.js, se você estudar o código fonte dele, você verá que ele faz uso pesado deste recurso. 14/12/2015 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .