What does `getComputedStyle` return and how to iterate over it?

Question

Looking to get all the styles of a specific element via JavaScript. getComputedStyle 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 forEach loop as most of the properties are integer based, what are the other properties of the returned object?

For example logging the styles of an element with:

const styles = getComputedStyle(document.querySelector('.foo'))
for (let property in styles) {
    if (styles.hasOwnProperty(property)) {
      console.log('property:', property, 'value:', styles[property]);
    }
  }

Returns (abbreviated for brevity):

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

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, alignContent is the next key of the returned object.

Additionally is there a way to get only the declared style of an element and not all of the computed ones?

Answer 1

Here is how you can iterate over it. For more detail description check this: https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/

const isSameDomain = (styleSheet) => {
  if (!styleSheet.href) {
    return true;
  }

  return styleSheet.href.indexOf(window.location.origin) === 0;
};

const isStyleRule = (rule) => rule.type === 1;

const getCSSCustomPropIndex = () =>
  [...document.styleSheets]
    .filter(isSameDomain)
    .reduce(
      (finalArr, sheet) =>
        finalArr.concat(
          [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
            const props = [...rule.style]
              .map((propName) => [
                propName.trim(),
                rule.style.getPropertyValue(propName).trim(),
              ])
              .filter(([propName]) => propName.indexOf("--") === 0);
            return [...propValArr, ...props];
          }, [])
        ),
      []
    )
    
    console.log(getCSSCustomPropIndex());

:root{
  --primary: #112233;
  --secondary: #222222;
}

Answer 2

The getComputedStyle method returns a live CSSStyleDeclaration object.

Here's one way to iterate through its properties:

let p = document.querySelector("p");
let showProps = (list) => {
  let out = "";
  [...list].forEach(s => { out += `${s} → ${list[s]}\n`; });
  return out;
}
let comp = getComputedStyle(p);
console.log(showProps(comp));
console.log(comp.getPropertyValue("font"));
console.log(showProps(p.style));

p      { color:gray; font:bold 12pt fantasy; }
#brown { color:brown; }
.green { color:green; }

<p style="color:red" class="green" id="brown">Hello world</p>

In this example, I've created a <p> element and defined its color in four different places. I've also set the font shorthand property, specifying things like the font-size. CSS prioritizes the style attribute's red color, which you can see in the rendering.

The JavaScript code gets the computed style for that element and then runs that through a function that converts it to a proper array and iterates through each of its properties, adding a new line with "property → value" to the out variable for each one. This is then returned and dumped to the console.

You can also do comp.getPropertyValue(property) to get the value of a given property, e.g. "font-size" (which JS additionally offers as the comp.fontSize property). The second console output in the example code shows the contents of comp.getPropertyValue("font").

One thing you'll notice is that units are converted in storage: red became rgb(255, 0, 0), bold became its numeric weight of 700, and 12pt became 16px (at least on my system; this varies by your setup). You may also have noticed that, as a shorthand property, font is not represented in the iterated dump, though its components are.

---

You also asked for a list of just the declared properties. This is quite complicated because these can come from a linked stylesheet, a <style> element, or the style attribute to the element. Within the former two, it could be inherited.

I suppose you could do base = getComputedStyle(document.createElement("p")) and then compare it with your <p> element's computed style, but that still inherits stuff from e.g. <style>p { color:gray }</style> (which I assume you want).

If all you're really looking for are the inline styles from the HTML tag's style attribute, that's as simple as iterating just on that: p.style is also a CSSStyleDeclaration object. This is the final console log in the example. As you can see, only the red color shows up, using the value as specified rather than as computed.