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