Свойства объекта Javascript Element.style CSSStyleDeclaration выглядят странно? ⇐ CSS

[Anonymous]

Предположим, у меня есть кнопка в HTML-файле:

Код: Выделить всё

Click Me

Используйте 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» и где значение красного цвета?

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/709 ... look-wierd