Changing CSS class properties using jQuery

Question

Is there a way to change the properties of a CSS class rather than the properties of an element using jQuery?

This is a practical example:

I have a div with class red

 .red {background: red;} 

I want to change the background property of red , not the elements that have the red class.

If I do this using jQuery . Css () method :

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

this will affect the elements that now have the red class. Everything is fine here. But if I make an Ajax call and add more divs with the red class, they will not have a green background, they will have the original red background.

I can call jQuery again . css () method . But I would like to know if there is a way to change the class itself. Please think that this is just a basic example.

Answer 1

You cannot directly modify CSS properties using jQuery. But you can achieve the same effect in at least two ways.

Dynamically load CSS from file

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

The above example is copied from:

• How to switch CSS files on the fly using jQuery

Dynamically add a style item

 $("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.red{background:green;}'); 

Sample code is copied from this JSFiddle script referenced by Alvaro in his comment .

Answer 2

If you cannot use another stylesheet by dynamically loading it, you can use this function to change the CSS class. Hope this helps you ...

 function changeCss(className, classValue) { // we need invisible container to store additional css definitions var cssMainContainer = $('#css-modifier-container'); if (cssMainContainer.length == 0) { var cssMainContainer = $('<div id="css-modifier-container"></div>'); 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 = $('<div data-class="' + className + '"></div>'); classContainer.appendTo(cssMainContainer); } // append additional style classContainer.html('<style>' + className + ' {' + classValue + '}</style>'); } 

This function takes any class name and replaces any previously set values ​​with a new value. Note: you can add multiple values ​​by passing the following to classValue: "background: blue; color:yellow" .

Answer 3

I did not find the answer I wanted, so I decided for myself: change the container div!

 <div class="rotation"> <!-- Set the container div css --> <div class="content" id='content-1'>This div gets scaled on hover</div> </div> <!-- Since there is no parent here the transform doesnt have specificity! --> <div class="rotation content" id='content-2'>This div does not</div> 

css that you want to save after executing $ target.css ()

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

change content containing div using css ()

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

Codepen example

Answer 4

You can remove classes and add classes dynamically

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

Answer 5

You can add a class to the parent element of the red div, for example. green style

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

then add style to css

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

so every time you add a red element to a green style, the background will be green.

Answer 6

Here is a bit of improvement in the excellent answer provided by Matthew Wolf. This adds the main container as a style tag to the head element and adds each new class to this style tag. a little more concise, and I think it works well.

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

Answer 7

You can use a different approach: instead of dynamically changing css, predefine your styles in CSS the way you want. Then use jQuery to add and remove styles from Javascript. (see code from Ajmal)

Answer 8

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

---

styleSheetIndex is the index value that corresponds to the order that you uploaded to the <head> file (for example, 0 is the first file, 1 is the next, etc., if there is only one CSS file, use 0),

rule is a CSS rule in a text string. For example: "body { display:none; }" .

lineIndex - line number in this file. To get the last line number, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length . Just console.log this styleSheet object got some interesting properties / methods.

Since CSS is a cascade, any rule that you try to insert for this selector, you can simply add to the bottom of the CSS file and overwrite everything that was written when the page was loaded.

In some browsers, after manipulating the CSS file, you need to force the CSS to “redraw” by calling some kind of meaningless method in the JS DOM, for example document.offsetHeight (it is abstracted as a DOM property, not a method, so you don't need to use "()") - just adding that after your CSSOM manipulation causes the page to redraw in older browsers.

---

So here is an example:

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