title: Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
body: <p>How could one get an elements CSS property (for example width/height) as it was set with CSS rules, in whatever units it was set (eg percent/em/px)? (In Google Chrome, preferably frameworkless). </p>
  
  <p>Using <code>getComputedStyle</code> returns the current value in pixels, so does <code>css()</code> in jQuery.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div class="b"&gt;first&lt;/div&gt;
  &lt;div id="a" class="a"&gt;second&lt;/div&gt;
  
  &lt;style&gt;
       div      { width: 100px; }
       x, div#a { width: 50%;   }
       .a       { width: 75%;   }
  &lt;/style&gt;
  </code></pre>
  
  <p>While iterating all <code>div</code> elements in this example, I'd like to be able to get the second <code>div</code>s width as <code>50%</code> (and the first as <code>100px</code>).</p>
  
  <hr>
  
  <p>Chrome element inspector can display CSS property value as they were set, so it should be possible in Chrome.</p>
  
  <p><img src="https://i.stack.imgur.com/uq4vm.png" alt="Chrome element inspector showing property value as they were set"></p>
  
  <hr>
  
  <p><strong>Not an exact duplicate</strong> of the linked question, as there the accepted answer there is a simple hack that produces a percentage width no matter what kind of width is set. And for the rest you have to know the selector used to make the active rule? How would one know that?</p>