jQuery change multiple CSS then change back

Question

What is the preferred way to switch several css properties using jQuery and then switch them all back.

For example, if I set:

$element.css({ "background" : "white", "height": "50px", "width" : "30px" });
$anotherElement.css({ "overflow" : "hidden", "font-size": "12px", "padding" : "5px" });
$yetAnotherElement.css({ "top" : "10px", "font-weight": "bold" });

I used this specific count of elements with 2-3 different selectors for each to illustrate that it's not convenient to save each one by one and it's also not convenient to create "temporary classes" for each one especially if I had yetAnotherAnotherElement and so on... And let's also say they're in different containers.

It would be nice to be able to get the css "object":

var oldCSS= $element.css(); 
$element.css({ ...change css... });

//Change back
$element.css(oldCSS);

Should also work nicely with arrays:

//Set
elements.each(function (index, element) { 
     array[index] = $(element).css();
});

//Restore
elements.each(function (index, element) { 
     $(element).css(array[index]);
});

Is there something like this?

UPDATE: turns out I can set $element.css(cssObject) already by default its just a matter of overriding a blank css() to return an object or string based on a flag. For example:

element.css("overflow", true) would return { "overflow" : "hidden" } element.css("position", "overflow", true) would return { "position" : "absolute", "overflow":"hidden" }

Then it can be easily restored like I want: element.css(cssObject)

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

I think the easiest solution would be to convert those elements into a CSS class.

E.g.

.style1 {
    "background" : "white", "height": "50px", "width" : "30px"
}

Then you can just add and remove the class from the element(s) to toggle it on and off.

$element.toggleClass('style1');

If you would prefer not to store these styles in your regular style sheets and instead generate them at runtime. The following answer provides details on dynamically added classes to a page. It should also have the added benefit giving the CSS priority over your linked style sheets.

jQuery create CSS rule / class @ runtime

edited May 23 '17 at 10:25

Community

1
1

answered Apr 12 '13 at 05:23

Dracs

437
4
20

Thanks for the update I looked through all those solutions and they're all ugly because they simply inject the classes into the page. The syntax I proposed is very neat and would works nicely with an array. array.push(elements.eq(index).css()) ..etc then iterate and restore...no trace of any classes all it took was objects that get wiped when they exit scope. I'm not yet ready to believe something like this doesn't exist. – parliament Apr 12 '13 at 05:43

chandresh_cool · Answer 2 · 2013-04-12T05:31:47.670

1

I recommend use .toggleClass and put the relevant css into a class:

your class can be :

.test {
    background : "white", "height": "50px", "width" : "30px";
}

edited Apr 12 '13 at 05:31

answered Apr 12 '13 at 05:22

chandresh_cool

11,753
3
30
45

I'm looking to really create something like this on the fly. – parliament Apr 12 '13 at 05:23
What does on the fly means. Can u clarify it was never mentioned in question. – chandresh_cool Apr 12 '13 at 05:24
This is what I meant by "temporary classes" it just seems like a lot of code pollution to have lots of one time use classes for such small 2-3 property changes. If I can create such classes on the fly (in javascript) and not need to save them anywhere would be nice. The problem is there's so many disapparate elements and too many states there will just be an abundance of these classes – parliament Apr 12 '13 at 05:25
Small issue with your code `#test` is an ID selector. It should be `.test`. – Dracs Apr 12 '13 at 05:26
I think he mean that he has some dynamic css attr, so he can't use class – Steely Wing Apr 12 '13 at 05:28

score 1 · Accepted Answer · answered Apr 12 '13 at 06:14

jQuery CSS support to use an array of prop, I have made a example

http://jsfiddle.net/steelywing/utGVz/

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(function () {
    // Which css want to save
    var cssList = ['background-color', 'color'];

    // Use to save css
    var css;

    $('#save').click(function () {
        css = $('div').css(cssList);
    });

    $('#restore').click(function () {
        $('div').css(css);
    });

    $('#change').click(function () {
        $('div').css('background-color', get_random_color());
        $('div').css('color', get_random_color());
    });
});

It's worth noting this is a brand new feature released 2 weeks ago with jQuery 1.9. Right on time :) — parliament, Apr 12 '13 at 08:38

jQuery change multiple CSS then change back

3 Answers3