3

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...

TrySpace
  • 2,233
  • 8
  • 35
  • 62
  • css() is for getting single properties only. What you are getting is the function as source -- http://api.jquery.com/css/ – Smamatti Mar 07 '12 at 21:39
  • [Duplicate of: How to get all the calculated styles of an element with jQuery](http://stackoverflow.com/questions/2151558/how-to-get-all-the-calculated-styles-of-an-element-with-jquery) – Elf Sternberg Mar 07 '12 at 21:44

3 Answers3

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • That will *not* get them the full style. That will only get those attributes unique to the object. – Elf Sternberg Mar 07 '12 at 21:45
  • @Elf Sternberg - understood...but possible that is all that is needed, was offfering a suggestion – charlietfl Mar 07 '12 at 21:51
  • 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): http://stackoverflow.com/a/11328023/918414 – ThinkingStiff Jul 06 '12 at 02:42
1

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.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
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.

Matthew
  • 8,183
  • 10
  • 37
  • 65