Get CSS from element, put in JSON-Array, change element, restore element with stored CSS array

Question

So I want to get the css from a particular Element, put it in JSON-array, change element around, later restore the css of the element from the stored Array.

I tried:

var currentCSS = $(this).css;

The output is something like:

function (a,c) if(arguments.length....

So that seems it takes the function out of the jQuery, that's not what I want...

I could iterate through the wanted individual arguments, but there should be a better way...

Then later offcourse I'd try something like:

$(this).css(currentCSS);

But there might be no elegant solution to doing this...

css() is for getting single properties only. What you are getting is the function as source -- api.jquery.com/css — Smamatti
– Smamatti, Commented Mar 7, 2012 at 21:39
Duplicate of: How to get all the calculated styles of an element with jQuery — Elf Sternberg
– Elf Sternberg, Commented Mar 7, 2012 at 21:44

charlietfl · Accepted Answer · 2012-03-07 21:44:16Z

2

If all you are after is inline style as opposed to all of the style properties:

var $el=$(elem)
var style=$el.attr('style');
$el.removeAttr('style');


/* put style back*/

$el.attr('style',style);

Similarly after you have manipulated it, removing any inline adjustments that your code makes ... removing style attribute should put it back to whatever original css was applied

answered Mar 7, 2012 at 21:44

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

Elf Sternberg Over a year ago

That will not get them the full style. That will only get those attributes unique to the object.

charlietfl Over a year ago

@Elf Sternberg - understood...but possible that is all that is needed, was offfering a suggestion

ThinkingStiff Over a year ago

I think this does exactly what he's looking for. This is similar to an approach I took in this answer (but he wanted the whole page): stackoverflow.com/a/11328023/918414

David Thomas · Accepted Answer · 2012-03-07 22:16:15Z

Here's one way, but goodness it's ugly. I don't think I have the sanity required to turn this into a plugin (but if someone else could that'd be awesome! Please post a link!):

var elem = document.getElementById('a');
var originalCSSProperties = window.getComputedStyle(elem,null);
var originalCSSValues = [];
for (var i=0,len=originalCSSProperties.length; i<len; i++){
    originalCSSValues.push(
        window
        .getComputedStyle(elem,null)
        .getPropertyValue(originalCSSProperties[i]));
}

$('#a').css({'background-color':'red','color':'black'});

$('#reset').click(
    function(){
        for (var c=0,leng=originalCSSProperties.length;c<leng;c++){
            $('#a').css(originalCSSProperties[c],originalCSSValues[c]);
        }
    });

JS Fiddle demo.

Because this relies on window.getComputedStyle() it's absolutely not IE friendly, and, while I've not researched compatibility yet, I suspect it might require pretty modern browsers in general. But, that said, I hope it's of some use.

Matthew · Accepted Answer · 2012-10-18 14:28:45Z

0

To start with:

Create a clone of your element with jQuery.clone and store it in a variable
Remove any child elements from the clone
Make any needed changes you want to your element or it's contents

When you want to change back to your original style

Insert the clone before/after your element in the DOM
Remove the contents from your element and append them to the clone
Remove your element leaving only the clone with your element's contents

Of course there is no JSON array here where the styles are stored. Instead, your original styles are preserved in the clone of your element. I think this achieves the desired result you want anyway.

Here's a JSFiddle I made showing this in action.

answered Oct 18, 2012 at 14:28

Matthew

8,47610 gold badges41 silver badges67 bronze badges

Collectives™ on Stack Overflow

Get CSS from element, put in JSON-Array, change element, restore element with stored CSS array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related