Home Javascript Element.style CSSStyleDeclaration object's properties look wired?

Questions

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

February 1, 2022

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 check the btn.style['background-color']. It shows red.

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

So I suppose 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));

>Solution :

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);
});