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)

Community · Accepted Answer · 2017-05-23 10:25:41Z

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, 2017 at 10:25

CommunityBot

11 silver badge

answered Apr 12, 2013 at 5:23

Dracs

4576 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

parliament Over a year ago

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.

Steely Wing · Accepted Answer · 2013-04-12 06:14:04Z

1

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());
    });
});

answered Apr 12, 2013 at 6:14

Steely Wing

17.9k10 gold badges62 silver badges55 bronze badges

1 Comment

parliament Over a year ago

It's worth noting this is a brand new feature released 2 weeks ago with jQuery 1.9. Right on time :)

chandresh_cool · Accepted Answer · 2013-04-12 05:31:47Z

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, 2013 at 5:31

answered Apr 12, 2013 at 5:22

chandresh_cool

11.9k3 gold badges32 silver badges46 bronze badges

5 Comments

parliament Over a year ago

I'm looking to really create something like this on the fly.

chandresh_cool Over a year ago

What does on the fly means. Can u clarify it was never mentioned in question.

parliament Over a year ago

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

Dracs Over a year ago

Small issue with your code #test is an ID selector. It should be .test.

Steely Wing Over a year ago

I think he mean that he has some dynamic css attr, so he can't use class

Collectives™ on Stack Overflow

jQuery change multiple CSS then change back

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related