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

Question

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

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

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><divid="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 with red background is created. After clicking the Change css button the div will have the blue background. Until then everything is working out as expected, but clicking the Add Div 2 button, then a new div is added with the red background.

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

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

javascript jquery css

asked by anonymous 26.07.2016 / 19:22

2 answers

2

The only way to change the style of an element is by overwriting or adding 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><divid="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 in the element you want it to contain the style.

26.07.2016 / 19:24

How do I get the index number of an array? Add form fields with jQuery to be sent in php

score 2 · Accepted Answer

If the templates are not created dynamically, they only change between them, you can do this:

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><divid="conteudo">
  <div class="teste red">Minha Div 1</div>
</div>
<br />
<button id="mudarcss">Mudar css</button>
<button id="adicionardiv">Adicionar Div 2</button>