How do I clone an HTML element's style object using JavaScript or jQuery?

Question

I'm trying to clone the style object of an element. This should allow me to reset the styles of said element after I change them.

For example:

el.style.left;      // 50px
curr_style.left;    // 50px;

/* 
Modify the elements style.
The cloned style should still hold the original properties from when it was cloned.
*/
el.style.left = '20px';
curr_style.left // should still return 50px.

I first tried to copy it by assigning a variable to the value of el.style. Unfortunately, this points to it by reference and any changes to the style are reflected in the cloned object.

My other attempt involved using jQuery's object extend method to create a copy as such:

var curr_style = $.extend( {}, el.style );

This doesn't seem to work as curr_style.left etc. return undefined.

Any help would be appreciated!

I ended up doing this to retrieve each property: (based on advice from @Raynos)

$.fn.getStyle = function(){
    var style,
    el = this[0];

    // Fallbacks for old browsers.
    if (window.getComputedStyle) {
        style = window.getComputedStyle( el );
    } else if (el.currentStyle) {
        style = $.extend(true, {}, el.currentStyle);
    } else {
        style = $.extend(true, {}, el.style);
    }

    // Loop through styles and get each property. Add to object.
    var styles = {};
    for( var i=0; i<style.length; i++){
        styles[ style[i] ] = style[ style[i] ];
    }

    return styles;
};

Raynos · Accepted Answer · 2011-06-02 10:00:26Z

6

var curr_style;
if (window.getComputedStyle) {
    curr_style = window.getComputedStyle(el);
} else if (el.currentStyle) {
    curr_style = $.extend(true, {}, el.currentStyle);
} else {
    throw "shit browser";
}

style has non-enumerable properties which makes .extend fall over. You want to use the getComputedStyle method to get the styles of an element.

You also want to support older versions of IE by extending el.currentStyle which does have enumerable properties.

The first argument (when set to true) tells jQuery to do a deep clone.

edited Jun 2, 2011 at 10:00

answered Jun 2, 2011 at 9:33

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

6 Comments

Adam Hutchinson Over a year ago

Hi, this seems to be a step in the right direction. The problem I'm having is that it seems that the style object is not a fundamental javascript object. For example, inspecting the style object and the cloned object in firebug, they seem to have the same properties. Neither of them have a 'left' property but style.left will return a value whereas curr_style.left will not.

Raynos Over a year ago

@AdamHutchinson the problem is that the properties of style are non-enumerable.

Adam Hutchinson Over a year ago

@Raynos is there any way to get around that?

Raynos Over a year ago

@AdamHutchinson yes. Use computedStyle & currentStyle which have enumerable properties. (computedStyle also returns a new object so it's cool)

Adam Hutchinson Over a year ago

@Raynos It seems that changing el.style.left causes the value returned from curr_style.left to change even when using computedStyle

|

Tim Down · Accepted Answer · 2011-06-02 10:10:10Z

5

For the purpose of simply resetting styles, I'd suggest just using the cssText (also see MDN) property of the style object. This works in all major browsers and is nice and simple.

jsFiddle:

http://jsfiddle.net/timdown/WpHme/

Example code:

// Store the original style
var originalCssText = el.style.cssText;

// Change a style property of the element
el.style.fontWeight = "bold";

// Now reset
el.style.cssText = originalCssText;

answered Jun 2, 2011 at 10:10

Tim Down

326k76 gold badges461 silver badges546 bronze badges

2 Comments

Adam Hutchinson Over a year ago

Hi Tim, I'm planning on using the animate method of jQuery to perform the reset and only using certain properties from the style object.

Tim Down Over a year ago

@Adam: Fair enough then, my answer won't do. I'll leave it here anyway for anyone coming across this question in future who it may help.

Collectives™ on Stack Overflow

How do I clone an HTML element's style object using JavaScript or jQuery?

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related