cambio de definición de clase CSS

Question

Supongamos que tengo esta clase:

.MyClass{background:red;} 

Esta clase corresponde a varios divs. Quiero cambiar el color del fondo a naranja cambiando el color definido en MyClass.

Ahora, sé que podría hacer $('.MyDiv').css('background', 'orange');

Pero mi pregunta es realmente esto: ¿Cómo se cambia la definición de clase CSS de manera que MiClase elementos tienen ahora background:orange;? Quiero poder cambiar varias propiedades de color CSS de un color a otro.

Gracias.

Answer 1

La alteración real de su hoja de estilo es bastante desafiante. Mucho más fácil, sin embargo, puede cambiar su hoja de estilo por una diferente, que puede ser suficiente para sus propósitos. Ver How do I switch my CSS stylesheet using jQuery?.

Para realmente alterar el contenido de la hoja de estilo, How to change/remove CSS classes definitions at runtime? le ayudará a comenzar.

Answer 2

Será mucho mejor que agregue y elimine clases en lugar de intentar cambiarlas.

Por ejemplo

.red { 
    background: red; 
} 

.orange { 
    background: orange; 
} 

$('#div').click(function(){ 
    $(this).removeClass('red').addClass('orange'); 
}); 

Answer 3

Tienes 2 opciones

1. añaden una nueva hoja de estilo que anula este .MyClass
2. tienen una segunda clase con la propiedad diferente, y cambiar el nombre de clase de estos elementos

Answer 4

En cuanto a su pregunta, creo ab El enfoque etter es cambiar MyClass con otra cosa utilizando JavaScript en lugar de cambiar las propiedades de la clase de forma dinámica.

Pero si usted todavía está interesado puede cambiar hojas de estilo CSS con jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Answer 5

var changeClassProperty = function(sheetName, className, propertyName, newValue, includeDescendents) { 
     var ending = '$'; 
     setValue = ''; 
     if (includeDescendents === true) { 
      ending = ''; 
     } 
     if (typeof(newValue) != 'undefined') { 
      setValue = newValue; 
     } 
     var list = document.styleSheets; 
     for (var i = 0, len = list.length; i < len; i++) { 
      var element = list[i]; 
      if (element['href'] && element['href'].match(new RegExp('jquery\.qtip'))) { 
       var cssRules = element.cssRules; 
       for (j = 0, len2 = cssRules.length; j < len2; j++) { 
        var rule = cssRules[j]; 
        if (rule.selectorText.match(new RegExp(className + ending))) { 
         cssRules[j].style.backgroundColor = setValue; 
         console.log(cssRules[j].style.backgroundColor); 
        } 
       } 
      } 
     } 
    } 
changeClassProperty('jquery.qtip', 'tipsy', 'backgroundColor', 'yellow'); 

Answer 6

Es difícil encontrar la regla que desea porque hay que iterar a través de la matriz document.styleSheets[i].cssRules. (y compare su nombre de clase con el atributo selectorText)
Así que mi solución a este problema es agregar una nueva clase de CSS, eliminar la clase de CSS anterior del elemento HTML y agregar esta clase en lugar de ella.

var length = getCssRuleLength(); 
 
var newClassName = "css-class-name" + length; 
 

 
//remove preview css class from html element. 
 
$("#your-html-element").removeClass("css-class-name"); 
 
$("#your-html-element").removeClass("css-class-name" + (length-1)); 
 

 
$("#your-html-element").addClass(newClassName); 
 

 
//insert a css class 
 
insertCssRule("." + newClassName + ' { max-width: 100px; }', length); 
 

 

 
function getCssRuleLength() { 
 
\t var length = 0; 
 
\t if (document.styleSheets[1].cssRules) { 
 
\t \t length = document.styleSheets[1].cssRules.length; 
 
\t } else if (document.styleSheets[1].rules) { //ie 
 
\t \t length = document.styleSheets[1].rules.length; 
 
\t } 
 
\t return length; 
 
} 
 
function insertCssRule(rule, index) { 
 
\t if (document.styleSheets[1].cssRules) { 
 
\t \t document.styleSheets[1].insertRule(rule, index); 
 
\t } else if (document.styleSheets[1].rules) { //ie 
 
\t \t document.styleSheets[1].addRule(rule, index); 
 
\t } 
 
}