1There might not seem to be a difference with 'color' but consider:
2
3element.style.backgroundColor = 'blue' // works
4element.style['backgroundColor'] = 'blue' // works
5element.style['background-color'] = 'blue' // does not work
6
7element.style.setProperty('background-color','blue') // works
8element.style.setProperty('backgroundColor','blue') // does not work

1var o = {}; // Creates a new object
2
3// Example of an object property added
4// with defineProperty with a data property descriptor
5Object.defineProperty(o, 'a', {
6  value: 37,
7  writable: true,
8  enumerable: true,
9  configurable: true
10});
11// 'a' property exists in the o object and its value is 37
12
13// Example of an object property added
14// with defineProperty with an accessor property descriptor
15var bValue = 38;
16Object.defineProperty(o, 'b', {
17  // Using shorthand method names (ES2015 feature).
18  // This is equivalent to:
19  // get: function() { return bValue; },
20  // set: function(newValue) { bValue = newValue; },
21  get() { return bValue; },
22  set(newValue) { bValue = newValue; },
23  enumerable: true,
24  configurable: true
25});
26o.b; // 38
27// 'b' property exists in the o object and its value is 38
28// The value of o.b is now always identical to bValue,
29// unless o.b is redefined
30
31// You cannot try to mix both:
32Object.defineProperty(o, 'conflict', {
33  value: 0x9f91102,
34  get() { return 0xdeadbeef; }
35});
36// throws a TypeError: value appears
37// only in data descriptors,
38// get appears only in accessor descriptors
39