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

admin管理员组

文章数量:1344961

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

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

• javascript
• jquery
• css

Share Improve this question Follow edited Jun 2, 2011 at 12:26 Adam Hutchinson asked Jun 2, 2011 at 9:30 Adam HutchinsonAdam Hutchinson 26433 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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/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;

本文标签： How do I clone an HTML element39s style object using JavaScript or jQueryStack Overflow