title: How to get the applied style from an element, excluding the default user agent styles
body: <p>How in JavaScript do you retrieve the styles that have been applied to an element, <strong>excluding the default user agent styles</strong> (so inline + stylesheet styles only).</p>
  
  <p>Basically, all the user styles you can see in the Computed tab of your favorite developer tool:</p>
  
  <p><a href="https://i.stack.imgur.com/UBWAT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UBWAT.png" alt="User styles displayed in Edge&#39;s developer tool"></a></p>
  
  <p>No framework please, IE8+, Edge, Chrome and Firefox.</p>
  
  <p>I am expecting the answer to be the result of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle" rel="noreferrer">getComputedStyle</a> minus <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getDefaultComputedStyle" rel="noreferrer">getDefaultComputedStyle</a>, but in a cross browser way. Seeing that all developer tools are capable of doing it, there must be a solution :)</p>