Change CSS class properties with jQuery

user_1176359 0
Viewed 219749

Is there a way to change the properties of a CSS class, not the element properties, using jQuery?

This is a practical example:

I have a div with class red

.red {background: red;}

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

If I do it with jQuery .css() method:

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

it will affect the elements that right now have class red. Up to here everything is fine. But if I make an Ajax call, and insert more divs with red class, those won't have a green background, they will have the initial red background.

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

properties class css jquery ajax
8 Answers

In case you cannot use different stylesheet by dynamically loading it, you can use this function to modify CSS class. Hope it 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 will take any class name and replace any previously set values with the new value. Note, you can add multiple values by passing the following into classValue: "background: blue; color:yellow".

user_15147390

You can add a class to the parent of the red div, e.g. green-style

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

then add style to the css

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

so everytime you add red element under green-style, the background will be green

user_19893870
Related