Get current applied style with JS

Question

I was looking at this post How to get the background color of an element using javascript?

which confirmed that if you do

div.style.color 

you will get returned the color applied to the div.

However this only seems to return a result if the style is applied inline on the element?

How do you return the style applied to the element when the style is applied through a style sheet (or in tags) rather than directly inline?

See example below.

console.log(document.getElementById('content').style.backgroundColor);
console.log(document.getElementById('content').style.color);

#content {
  background-color: #000000;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<div id="content" style="color:red;"></div>

console.log(document.getElementById('content').style.backgroundColor);

returns nothing

console.log(document.getElementById('content').style.color);

returns red

Answer 1

You need to use getComputedStyle() to get the styles assigned through the stylesheet.

console.log(getComputedStyle(document.getElementById('content')).backgroundColor);
console.log(document.getElementById('content').style.color);

#content {
  background-color: #000000;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<div id="content" style="color:red;"></div>