Is there a way to clone the style object of an element so that I can reset the styles back to their original values after making changes? Here's an 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 attempted to copy the style by assigning a variable to el.style, but that didn't work as any changes made to the style were reflected in the cloned object due to referencing. Then, I tried using jQuery's object extend method like this:
var curr_style = $.extend( {}, el.style );
However, this method doesn't seem to be returning the expected results as curr_style.left is undefined.
If anyone has suggestions or solutions, please share! Your help would be greatly appreciated.
To retrieve each property, I ended up doing the following: (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;
};