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?
className
do elemento e os novos já criar o novoclassName