Cambiar las propiedades de la clase CSS con jQuery

¿Hay alguna manera de cambiar las propiedades de una clase de CSS, no las propiedades de los elementos, utilizando jQuery?

Este es un ejemplo práctico:

Tengo un div con clase red

 .red {background: red;} 

Quiero cambiar red propiedad de fondo red clase, no los elementos que tienen fondo red clase asignado.

Si lo hago con el método jQuery .css () :

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

afectará a los elementos que ahora tienen clase red . Hasta aquí todo está bien. Pero si hago una llamada Ajax e inserto más divs con clase red , esos no tendrán un fondo verde, tendrán el fondo red inicial.

Podría llamar al método jQuery .css () nuevamente. Pero me gustaría saber si hay una forma de cambiar la clase en sí. Por favor considere que esto es solo un ejemplo básico.

No puede cambiar las propiedades de CSS directamente con jQuery. Pero puedes lograr el mismo efecto al menos de dos maneras.

Cargar CSS dinámicamente desde un archivo

 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); } } 

El ejemplo anterior se copia de:

  • Cómo cambiar archivos CSS sobre la marcha usando jQuery

Agregue dinámicamente un elemento de estilo

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

El código de ejemplo se copia de este violín JSFiddle referenciado originalmente por Alvaro en su comentario .

En caso de que no pueda usar diferentes hojas de estilo cargándolas dinámicamente, puede usar esta función para modificar la clase CSS. Espero que te ayude …

 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 función tomará cualquier nombre de clase y reemplazará cualquier valor previamente establecido con el nuevo valor. Tenga en cuenta que puede agregar varios valores al pasar lo siguiente a classValue: "background: blue; color:yellow" .

Puede eliminar clases y agregar clases dinámicamente

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

No encontré la respuesta que quería, así que la resolví yo mismo:
modificar un contenedor div!

 
This div gets scaled on hover
This div does not

CSS que desea persistir después de ejecutar $ target.css ()

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

modificar el contenido que contiene div con css ()

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

Ejemplo de Codepen

Puede agregar una clase al elemento primario del elemento div rojo, por ejemplo, estilo verde

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

luego agrega estilo al CSS

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

así que cada vez que agregue elementos rojos bajo estilo verde, el fondo será verde

Aquí hay un poco de mejora en la excelente respuesta proporcionada por Mathew Wolf. Éste agrega el contenedor principal como una etiqueta de estilo al elemento principal y agrega cada nueva clase a esa etiqueta de estilo. un poco más conciso y creo que funciona bien.

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

Es posible que desee adoptar un enfoque diferente: en lugar de cambiar el CSS de forma dinámica, predefina sus estilos en CSS de la forma que desee. Luego use JQuery para agregar y eliminar estilos desde dentro de Javascript. (ver el código de Ajmal)

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


styleSheetIndex es el valor de índice que corresponde a qué orden cargó el archivo en (por ejemplo, 0 es el primer archivo, 1 es el siguiente, etc. si solo hay un archivo CSS, use 0).

rule es una regla CSS de cadena de texto. De esta manera: "body { display:none; }" .

lineIndex es el número de línea en ese archivo. Para obtener el último número de línea, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length . Solo console.log ese objeto styleSheet, tiene algunas propiedades / métodos interesantes.

Como CSS es una “cascada”, cualquiera que sea la regla que intente insertar para ese selector, puede agregarla al final del archivo CSS y sobrescribirá todo lo que se diseñó al cargar la página.

En algunos navegadores, después de manipular el archivo CSS, debe forzar a CSS a “volver a dibujar” llamando a un método sin sentido en DOM JS como document.offsetHeight (se abstrae como una propiedad DOM, no como método, por lo que no use “( ) “) – simplemente agregando que después de la manipulación de CSSOM obliga a la página a volver a dibujar en navegadores más antiguos.


Así que aquí hay un ejemplo:

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