Need help: strange JavaScript behavior... one variable gets changed when another is set
<p>Sorry couldn't think of a better title. :)</p>

<p>Here goes,</p>

<p>I have been pulling my hair out for hours trying to figure this out.</p>

<p>I have the following function:</p>

<pre><code>function changeCss(elem, styles) {

   var oldstyles = styles;

   elem.css( styles )

   for(var key in styles){
       var oldstyle = input.css(key);
     oldstyles[key] = oldstyle;              //this line is the issue
       elem.data( 'oldstyle', oldstyles )                      
   }
}
</code></pre>

<p>Here is an example of how it gets called:</p>

<pre><code>var theStyle = { border: '1px solid red'};
//elem is a jQuery object of an HTML element

changeCss(elem, thestyle);
</code></pre>

<p>The problem is that after the commented line ( line 8 ), <code>styles</code>'s value is whatever <code>oldstyles</code>'s value is.</p>

<p>So for example if that particular element's CSS attribute for border was not set, ie undefined, <code>styles</code>'s value will be <code>{ border: "" }</code></p>

<p>How is that even possible? That is why I am delcaring <code>oldstyles</code>; I'm making a "backup" of the <code>styles</code> variable.</p>

<p>I have changed the 3rd line with <code>var oldstyles = {};</code> and it seems to work correctly.</p>

<p>But this isn't how it is supposed to be, I need to have the old styles because later I want to reset the styles - but only the ones I changed.</p>

<p>I can't understand why it "breaks" when <code>oldstyles</code> equals <code>styles</code>?</p>

<p>I hope I am giving enough code for you to understand, and also that I am expaining myself good enough. :)</p>

<p>If anything is unclear, please ask.</p>

<p>Thank you for any insight and help.</p>
