Get current applied style with JS

Question

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

score 7 · Accepted Answer · answered Jan 28 '15 at 22:10

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>

1 Answers1