Styling html elements with objects keys and values

Question

I'm trying to style a button with a loop through the object's keys and values. Values are working but keys are not.

let btn = document.querySelector('.button');
let obj = {color: 'red'}
Object.keys(obj).map(f=>btn.style.f = obj[f])

So, finally it would render like this btn.style.color = 'red'

but btn.style.f, f is not taking but if replace the f with color then it's working.

Any help.

Md Sabbir Alam · Accepted Answer · 2020-12-13T14:49:03.263

2

You should access btn.style's attribute like this as the attribute is dynamic,

Object.keys(obj).forEach(f=>btn.style[f] = obj[f])

As mentioned in the above link,

You can access object properties by dot notation or by bracket notation.
var x = {'test': 'hi'};
alert(x.test); // alerts hi
alert(x['test']); // alerts hi
When you have a dynamic value, you have to use the latter:
var property = 'test';
alert(x.property); // looks for x.property, undefined if it doesn't exist
alert(x[property]); // looks for x['test'], alerts hi
So what you actually want is:
alert(data[bsID][0].time);

Besides as @charlietfl mentioned, you should use Object.keys(obj).forEach() instead of .map().

edited Dec 13 '20 at 14:49

answered Dec 13 '20 at 14:45

Md Sabbir Alam

4,937
3
15
30

This answer could benefit from some sort of an explanation. – Rojo Dec 13 '20 at 14:46
Using `map()` is the wrong tool for the job – charlietfl Dec 13 '20 at 14:47
That should be a comment for the post itself. @charlietfl – Md Sabbir Alam Dec 13 '20 at 14:48
A good answer should mention that issue, not continue with bad practice – charlietfl Dec 13 '20 at 14:48
Just did. Thanks :) – Md Sabbir Alam Dec 13 '20 at 14:49
1

using `forEach`, so it will not return anything. is that correct? – Pranab Dec 13 '20 at 14:50
Yes. map is for when you want to do some mutation for all of the item in the array and return a new array with the mutation. For just looping .forEach should be used. – Md Sabbir Alam Dec 13 '20 at 14:51

Styling html elements with objects keys and values

1 Answers1