3

Tenho um site onde a criação do conteúdo é dinâmica e o usuário pode escolher a cor a ser utilizada em componentes, mas, preciso que ele veja a atualização em tempo real, então, preciso que a classe seja alterada com o valor necessário e que os elementos adicionados também ganhem essa alteração.

Tenho uma classe no meu CSS da seguinte maneira:

<style type="text/css">
    .color
    {
        background: red;
    }
</style>

Como alterar o background dessa classe dinamicamente para que todos os elementos recebam o novo valor do background e os próximos elementos a serem criados já venham com esse elemento?

5
  • Explique melhor o que você está tentando fazer, porque não está claro.
    – Paulo
    Commented 7/05/2014 às 22:05
  • Tenho um site onde a criação do conteúdo é dinamica e o usuario pode escolher a cor a ser utilizada em componentes, mas, preciso que ele veja a atualização em tempo real, então, preciso que a classe seja alterada com o valor necessário e que os elementos adicionados também ganhem essa alteração
    – Caio Gomes
    Commented 7/05/2014 às 22:07
  • Caio, editei minha resposta, veja se essa solução serve.
    – Paulo
    Commented 7/05/2014 às 22:19
  • 1
    não da @PauloMaciel mas a do Sergio é exatamente o que eu precisava :D
    – Caio Gomes
    Commented 7/05/2014 às 22:21
  • Removi a solução que eu havia colocado já que não está alterando os elementos futuros, mas adicionei um complemento a resposta de Sergio.
    – Paulo
    Commented 7/05/2014 às 22:48

2 Respostas 2

4

Se você tiver o CSS dentro do HTML pode fazer assim:

var style = $('style').text();
var newStyle = '.color {color: red; }';
$('style').text(newStyle);

Exemplo

O seletor $('style') vai procurar o <style> e mudar-lhe o conteúdo. Atenção que este método pode ser "força bruta", por isso sugiro ter somente o minimo necessário no HTML

1
  • 1
    isso resolveu o meu problema, valeu :D
    – Caio Gomes
    Commented 7/05/2014 às 22:25
3

Apenas complementando a resposta de Sergio, caso você não utilize a tag style no seu HTML, você pode fazer da seguinte maneira:

if($('style').length){
    var style = $('style').text();
    var newStyle = '.color {color: red; }';
    $('style').text(newStyle);
}else{
    $( "<style>.color {background-color : red}</style>" ).appendTo( "head" )
}

Assim você pode colocar seu CSS inicial separado do seu HTML.

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 .