title: How do I clone an HTML element's style object using JavaScript or jQuery?
body: <p>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.</p>
  
  <p>For example:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>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. </p>
  
  <p>My other attempt involved using jQuery's object extend method to create a copy as such:</p>
  
  <pre><code>var curr_style = $.extend( {}, el.style );
  </code></pre>
  
  <p>This doesn't seem to work as curr_style.left etc. return undefined.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p><strong>I ended up doing this to retrieve each property:</strong> (based on advice from @Raynos)</p>
  
  <pre><code>$.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&lt;style.length; i++){
          styles[ style[i] ] = style[ style[i] ];
      }
  
      return styles;
  };
  </code></pre>