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 


        

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>