Recipe 17.7

Getting an Element's Computed Style

window.getComputedStyle will calculate the styles applied to an element, taking into account CSS stylesheet rules and inline styles.

Demo

What color am I?

Code

JavaScript

const content = document.querySelector('#example');
const styles = window.getComputedStyle(content);
console.log(styles.backgroundColor);

HTML

<style>
  #example {
    background-color: blue;
  }

  .example-container {
    background-color: red;
    color: white;
  }
</style>

<div id="example" class="example-container">What color am I?</div>