Change CSS class definition

Question

Suppose I have this class:

.MyClass{background:red;} 

This class applies to multiple divs. I want to change the background color to orange by changing the color defined in MyClass.

Now I know that I can do $('.MyDiv').css('background', 'orange');

But my question really is: how to change the definition of the CSS class so that now MyClass elements have background:orange; ? I want to be able to change several CSS color properties from one color to another.

Thanks.

Answer 1

Actually modifying your stylesheet is quite difficult. Much simpler, however, you can turn off your stylesheet for another, which may be enough for your purposes. See How to switch CSS stylesheet using jQuery? .

To actually change the contents of a stylesheet How do I change / delete CSS class definitions at run time? you will start.

Answer 2

You have 2 options

• add a new stylesheet that overrides this .MyClass
• have a second class with a different property and change the class name on these elements

Answer 3

Considering my question, I think the best approach is to switch MyClass to something else using JavaScript, rather than dynamically changing the properties of this class.

But if you're still interested, you can switch CSS stylesheets using jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Answer 4

 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 5

It’s hard to find the right rule because you need to document.styleSheets[i].cssRules over the document.styleSheets[i].cssRules . (and compare your class name with the selectorText attribute)
So my solution to this problem is to add a new CSS class, remove the old CSS class from the HTML element, and add this class instead.

 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() { var length = 0; if (document.styleSheets[1].cssRules) { length = document.styleSheets[1].cssRules.length; } else if (document.styleSheets[1].rules) { //ie length = document.styleSheets[1].rules.length; } return length; } function insertCssRule(rule, index) { if (document.styleSheets[1].cssRules) { document.styleSheets[1].insertRule(rule, index); } else if (document.styleSheets[1].rules) { //ie document.styleSheets[1].addRule(rule, index); } } 

Answer 6

You will be much better off adding and removing classes instead of trying to change them.

for instance

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