console.log of backgroundColor shows "" instead of the color value

Question

I have an button element with id "btn". I want to console.log the background color property it shows blank instead. What is the problem? Thank you.

let btnColor = document.getElementById("btn").style.backgroundColor;
console.log(btnColor)

#btn{
  display: block;
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  background-color: #74992e;
}

<button id="btn">Click on me</button>

You haven't defined `background-color` of the inline style of the button. — Teemu, Apr 10 '22 at 09:09

score 0 · Answer 1 · edited Apr 11 '22 at 13:30

Use this:

let btnColor = window.getComputedStyle(document.getElementById(“btn”)).backgroundColor
console.log(btnColor)

it’s working fine for me

explain: sometimes window.getComputedStyle will get the style object of an elem so that if you call .backgroundColor then it’s working fine

summary two functions :)

1 Answers1