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

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 :

Answer 2

If you look at the Specification for the CSSStyleDeclaration, you get a bit more of the inner workings of the handling of CSS in JavaScript.

These are the steps that JS takes to save your CSS styles:

1. If you supply a camelCase version of a property name, the CSS property to IDL attribute algorithm converts the string into dash-case, so it can be used later

2. The setProperty(property, value, priority) method is called, property being the dash-case version of the property name (eg background-color ), and value being the value the property should be set to without !important flags (eg "red" )

3. The property gets pushed into an internal NodeList structure, the CSSDeclaration , which holds the property name, value, important flag and a case-sensitive flag

4. Now, the style is computed, this is up to the implementation of the browser mostly, there is certain restrictions on property order and mapping logic ( here ) and of course there are other specifications for how elements should behave

Now, to access these properties, internally, there is both an array of all computed properties as well as the aforementioned NodeList to get values by their property name. The methods to access these are item(index) .

Which is why, when you look at your CSSStyleDeclaration on the console there is a 0: "background-color" at the top, it's the first (computed) property in the NodeList for the element, so e.style.item(0) will return "background-color" .

If you now want to get the value of the property, you can use getPropertyValue(property) which goes through the NodeList and finds the item with the corresponding property name and returns it's value.

JavaScript has short-hands for these function, through the Object index ( here ), so e.style[property] runs the getPropertyValue() for that property name, and through an Array index for the item(index) method, so e.style[index] runs the item() method.

 const btn = document.querySelector('#btn'); btn.style['background-color'] = 'red'; btn.addEventListener('click', () => { console.log(btn.style[0], btn.style.item(0)); console.log(btn.style[btn.style[0]], btn.style.getPropertyValue(btn.style.item(0))); });

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