Javascript Element.style CSSStyleDeclaration object's properties look wierd?

Question

Let's say I have a button in a HTML file,

<button id="btn">Click Me</button>

Use JavaScript to change the color of that button to red.

const btn = document.querySelector('#btn');
btn.style['background-color'] = 'red';

Then I checked the btn.style['background-color']. It showed red.

btn.addEventListener('click', () => {
    console.log(`This button is in ${btn.style['background-color']}`)
});

So I expected that my btn.style object should look like this,

{
  ... ,
  "background-color": "red",
  ... 
}

But when I print them in the console, why the key-value pair is 0: "background-color", and where is value red?

btn.addEventListener('click', () => console.dir(btn.style));

Answer 1

The CSSStyleDeclaration object is a bit exotic. If you look at btn.style["background-color"] or btn.style.backgroundColor directly, you'll see red (or some representation of red, it varies by browser).

const btn = document.querySelector('#btn');
btn.style['background-color'] = 'red';

btn.addEventListener('click', () => {
    console.log(btn.style["background-color"]);
    console.log(btn.style.backgroundColor);
});

<button id="btn">Click Me</button>

In the console output you showed, you'll find it under backgroundColor: