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