Javascript Element.style CSSStyleDeclaration 对象的属性看起来很奇怪？

Question

假设我在 HTML 文件中有一个按钮，

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

使用 JavaScript 将该按钮的颜色更改为红色。

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

然后我检查了 btn.style['background-color']。它显示红色。

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

所以我希望我的 btn.style 对象应该是这样的，

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

但是当我在控制台中打印它们时，为什么键值对是 0: "background-color"，而值 red 在哪里？

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

Answer 1

CSSStyleDeclaration对象有点异国情调。如果您直接查看 btn.style["background-color"] 或 btn.style.backgroundColor，您会看到 red(或一些红色的表示，它因浏览器而异)。

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>

在您显示的控制台输出中，您会在 backgroundColor 下找到它: