title: What does `getComputedStyle` return and how to iterate over it?
body: <p>Looking to get all the styles of a specific element via JavaScript. <code>getComputedStyle</code> works fine, however I'm confused what type of object it returns and how to best iterate over it. While some other answers have suggested iterating it over an array with a <code>forEach</code> loop as most of the properties are integer based, what are the other properties of the returned object?</p>
  <p>For example logging the styles of an element with:</p>
  <pre><code>const styles = getComputedStyle(document.querySelector('.foo'))
  for (let property in styles) {
      if (styles.hasOwnProperty(property)) {
        console.log('property:', property, 'value:', styles[property]);
      }
    }
  </code></pre>
  <p>Returns (abbreviated for brevity):</p>
  <pre><code>property: 0 value: align-content
  property: 1 value: align-items
  property: 2 value: align-self
  property: 3 value: alignment-baseline
  property: 4 value: animation-delay
  ...
  property: alignContent value: normal
  property: alignItems value: normal
  
  </code></pre>
  <p>It would make sense if it is truly an array, as many of the properties are index based, however after index 319 it goes back to keys of strings, <code>alignContent</code> is the next key of the returned object.</p>
  <p>Additionally is there a way to get only the declared style of an element and not <em>all</em> of the computed ones?</p>