0

Tenho o seguinte trecho de código:

$("#mudarcss").click(function(){
		$(".teste").css("background-color", "blue");
});

$("#adicionardiv").click(function(){
	$("#conteudo").append("<div class='teste'>Minha Div 2</div>");
});
.teste {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
  <div class="teste">Minha Div 1</div>
</div>
<br />
<button id="mudarcss">Mudar css</button>
<button id="adicionardiv">Adicionar Div 2</button>

Perceba que, no resultado gerado pelo código acima, uma div com fundo vermelho é criada. Após clicar no botão Mudar css a div passa a ter o fundo azul. Até então tudo está saindo como o imaginado, mas ao clicar no botão Adicionar Div 2, então uma nova div é adicionada com o fundo vermelho.

Entendo que a nova div não existia ainda quando o fundo da primeira foi alterado, e pelo que parece o JavaScript só altera os atributos dos elementos que já existiam naquele momento no contexto do DOM, e não altera em nada os atributos CSS (que estão dentro das tags <style>) presentes na página.

Existe alguma forma de fazer com que o estilo seja definitivamente mudado para os elementos existentes e para os que passarão a existir via JavaScript, ou terei que recorrer a outra alternativa?

2
  • 1
    Em vez de mudar o CSS, não é mais fácil criar os dois estilos e o botão mudar o estado de uma variável que informa qual é o estilo atual? Mudar CSS pelo JS não é algo legal nesse caso, basta mudar o className do elemento e os novos já criar o novo className 26/07/2016 às 17:37
  • Boa @GabrielKatakura ... Faz muito mais sentido! rsrsrs... 26/07/2016 às 17:39

2 Respostas 2

2

Se os modelos não são criados dinamicamente, eles somente alteram entre si, pode fazer dessa maneira:

var cssAtual = 'red';

$("#mudarcss").click(function(){
  cssAtual = 'blue';
  $(".teste").attr('class', cssAtual);
});

$("#adicionardiv").click(function(){
  $("#conteudo").append("<div class='" + cssAtual + "'>Minha Div 2</div>");
});
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
  <div class="teste red">Minha Div 1</div>
</div>
<br />
<button id="mudarcss">Mudar css</button>
<button id="adicionardiv">Adicionar Div 2</button>

2

A única forma de mudar o estilo de um elemento é sobrescrevendo ou adicionando uma nova regra numa tag style, como demonstrado abaixo:

var flag = false; // flag para controle

$("#mudarcss").click(function() {

  if (!flag) {
    $("<style type='text/css'> .teste{ background-color:blue;} </style>").appendTo("head");
    flag = true;
    console.log("Estilo adicionado. :)");
  }

});

$("#adicionardiv").click(function() {
  $("#conteudo").append("<div class='teste'>Minha Div 2</div>");
});
.teste {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
  <div class="teste">Minha Div 1</div>
</div>
<br />
<button id="mudarcss">Mudar css</button>
<button id="adicionardiv">Adicionar Div 2</button>

Como mencionado pelo @Matheus uma alternativa seria criar uma classe e apenas adicionar no elemento que você quer que contenha o estilo.

7
  • Boa! E o bom é que ele só sobrescreve a propriedade alterada... jsfiddle.net/jedarc/tcqo8dsz 26/07/2016 às 17:33
  • Muito obrigado pela resposta! 26/07/2016 às 17:33
  • Mas para cada mudança será criado um novo elemento de estilo, isso não poderia trazer algum tipo de sobrecarga? 26/07/2016 às 17:35
  • 1
    Pq não criar duas classes CSS e uma variavel global no JS que manipula as duas classes?
    – Matheus
    26/07/2016 às 17:36
  • 1
    @JedaiasRodrigues Manipulando o DOM você consegue fazer qualquer coisa. :P
    – Laerte
    26/07/2016 às 17:41

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 .