CODEWITHSUNDEEP
jquery
parliament
parliament

Reputation: 22914

jQuery change multiple CSS then change back

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)

Upvotes: 1

Views: 1689

Answers (3)

Steely Wing
Steely Wing

Reputation: 17607

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

Upvotes: 1

Dracs
Dracs

Reputation: 457

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

Upvotes: 2

chandresh_cool
chandresh_cool

Reputation: 11830

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

your class can be :

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

Upvotes: 1

Related Questions