title: .prop() vs .attr()
body: <p>So <a href="http://api.jquery.com/category/version/1.6/" rel="noreferrer">jQuery 1.6</a> has the new function <a href="http://api.jquery.com/prop/" rel="noreferrer"><code>prop()</code></a>.</p>
  
  <pre><code>$(selector).click(function(){
      //instead of:
      this.getAttribute('style');
      //do i use:
      $(this).prop('style');
      //or:
      $(this).attr('style');
  })
  </code></pre>
  
  <p>or in this case do they do the same thing?</p>
  
  <p>And if I <em>do</em> have to switch to using <code>prop()</code>, all the old <code>attr()</code> calls will break if i switch to 1.6?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>selector = '#id'
  
  $(selector).click(function() {
      //instead of:
      var getAtt = this.getAttribute('style');
      //do i use:
      var thisProp = $(this).prop('style');
      //or:
      var thisAttr = $(this).attr('style');
  
      console.log(getAtt, thisProp, thisAttr);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='id' style="color: red;background: orange;"&gt;test&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(see also this fiddle: <a href="http://jsfiddle.net/maniator/JpUF2/" rel="noreferrer">http://jsfiddle.net/maniator/JpUF2/</a>)</p>
  
  <p>The console logs the <code>getAttribute</code> as a string, and the <code>attr</code> as a string, but the <code>prop</code> as a <code>CSSStyleDeclaration</code>, Why? And how does that affect my coding in the future?</p>