Alterar propriedades de class CSS com jQuery

Existe uma maneira de alterar as propriedades de uma class CSS, não as propriedades do elemento, usando jQuery?

Este é um exemplo prático:

Eu tenho um div com class red

 .red {background: red;} 

Eu quero mudar a propriedade de fundo red class, não os elementos que têm class red fundo atribuído.

Se eu fizer isso com o método jQuery .css () :

 $('.red').css('background','green'); 

Isso afetará os elementos que agora têm class red . Até aqui tudo está bem. Mas se eu fizer uma chamada Ajax e inserir mais divs com a class red , eles não terão um fundo verde, eles terão o fundo red inicial.

Eu poderia chamar o método jQuery .css () novamente. Mas eu gostaria de saber se existe uma maneira de mudar a class em si. Por favor, considere este é apenas um exemplo básico.

Você não pode alterar as propriedades CSS diretamente com jQuery. Mas você pode conseguir o mesmo efeito de pelo menos duas maneiras.

Carregar dinamicamente CSS de um arquivo

 function updateStyleSheet(filename) { newstylesheet = "style_" + filename + ".css"; if ($("#dynamic_css").length == 0) { $("head").append("") css = $("head").children(":last"); css.attr({ id: "dynamic_css", rel: "stylesheet", type: "text/css", href: newstylesheet }); } else { $("#dynamic_css").attr("href",newstylesheet); } } 

O exemplo acima é copiado de:

  • Como alternar arquivos CSS on-the-fly usando jQuery

Adicionar dinamicamente um elemento de estilo

 $("head").append(''); var newStyleElement = $("head").children(':last'); newStyleElement.html('.red{background:green;}'); 

O código de exemplo é copiado deste violino JSFiddle originalmente referenciado por Alvaro em seu comentário .

Caso não seja possível usar uma folha de estilo diferente carregando-a dinamicamente, você pode usar essa function para modificar a class CSS. Espero que ajude você …

 function changeCss(className, classValue) { // we need invisible container to store additional css definitions var cssMainContainer = $('#css-modifier-container'); if (cssMainContainer.length == 0) { var cssMainContainer = $('
'); cssMainContainer.hide(); cssMainContainer.appendTo($('body')); } // and we need one div for each class classContainer = cssMainContainer.find('div[data-class="' + className + '"]'); if (classContainer.length == 0) { classContainer = $('
'); classContainer.appendTo(cssMainContainer); } // append additional style classContainer.html(''); }

Esta function aceita qualquer nome de class e substitui quaisquer valores previamente definidos pelo novo valor. Observe, você pode adicionar vários valores, passando o seguinte em classValue: "background: blue; color:yellow" .

Você pode remover classs e adicionar classs dinamicamente

 $(document).ready(function(){ $('#div').removeClass('left').addClass('right'); }); 

Não encontrei a resposta que queria, então resolvi sozinho:
modifique um div do recipiente!

 
This div gets scaled on hover
This div does not

css você quer persistir depois de executar $ target.css ()

 .content:hover { transform: scale(1.5); } 

modificar conteúdo contendo div com css ()

 $(".rotation").css("transform", "rotate(" + degrees + "deg)"); 

Exemplo Codepen

Você pode adicionar uma class ao pai do div vermelho, por exemplo, estilo verde

 $('.red').parent().addClass('green-style'); 

em seguida, adicione estilo ao css

 .green-style .red { background:green; } 

então toda vez que você adicionar um elemento vermelho em verde, o fundo ficará verde

Aqui está uma pequena melhora na excelente resposta fornecida por Mathew Wolf. Este acrescenta o recipiente principal como uma tag de estilo ao elemento head e acrescenta cada nova class a essa tag de estilo. um pouco mais conciso e acho que funciona bem.

 function changeCss(className, classValue) { var cssMainContainer = $('#css-modifier-container'); if (cssMainContainer.length == 0) { var cssMainContainer = $(''); cssMainContainer.appendTo($('head')); } cssMainContainer.append(className + " {" + classValue + "}\n"); } 

Você pode querer uma abordagem diferente: Em vez de alterar o css dinamicamente, pré-defina seus estilos em CSS da maneira que você deseja. Em seguida, use o JQuery para adicionar e remover estilos de dentro do Javascript. (veja o código de Ajmal)

$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);


styleSheetIndex é o valor de índice que corresponde a qual ordem você carregou o arquivo no (por exemplo, 0 é o primeiro arquivo, 1 é o próximo, etc. se houver apenas um arquivo CSS, use 0).

rule é uma regra CSS de string de texto. Assim: "body { display:none; }" .

lineIndex é o número da linha nesse arquivo. Para obter o último número de linha, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length . Apenas console.log esse object styleSheet, ele tem algumas propriedades / methods interessantes.

Como o CSS é uma “cascata”, qualquer que seja a regra que você esteja tentando inserir para esse seletor, basta append à parte inferior do arquivo CSS e sobrescrever qualquer coisa que tenha sido estilizada no carregamento da página.

Em alguns navegadores, depois de manipular o arquivo CSS, você tem que forçar o CSS a “redesenhar” chamando algum método inútil no DOM JS como document.offsetHeight (ele é resumido como uma propriedade DOM, não um método, portanto não use “( ) “) – simplesmente adicionando que depois de sua manipulação CSSOM força a página a redesenhar em navegadores mais antigos.


Então aqui está um exemplo:

var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);