Is it possible to definitely change the style of a CSS class using Javascript?

Question

I have the following code snippet:

$("#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>

Note that, in the result generated by the above code, a div bottom-up red is created. After clicking the button Change css to div now has the bottom blue. Until then everything is going as imagined, but when you click the button Add Div 2, then a new div is added with the background red.

I understand the new div did not exist yet when the background of the first was changed, and it seems that Javascript only changes the attributes of the elements that already existed at that time in the context of the DOM, and does not change at all the CSS attributes (that are within the tags <style>) present on the page.

Is there any way to make the style is definitely changed to the existing elements and to those that will exist via Javascript, or I will have to resort to another alternative?

Answer 1

The only way to change the style of an element is to override or add a new rule in a style tag, as shown below:

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>

As mentioned by @Matheus an alternative would be to create a class and just add to the element you want to contain the style.

Answer 2

If the models are not created dynamically, they just change between themselves, you can do it that way:

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>