如何操作Node.prototype，使Node.style.styleProperty变成Node.styleProp

Question

---

我要做的是声明：

Element.style.display = "none"

与本声明相同：

Element.display = "none"

我也想做这个：

Element.style.background = "#fff"

做同样的事情：

Element.bg = "#fff"

我该怎么做？

---

Answer 1

一个想法是循环遍历element.style的所有键，并使用javascriptgetter和setter来提供这种行为。在这种情况下，元素是元素的实例。下面是一个示例代码：

Object.keys(element.style).forEach(key => {
Object.defineProperty(element, key, { 
get: function() {
return element.style[key];
},
set: function(newValue) {
element.style[key] = newValue;
}
});
})

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

使用getter，我们访问element.style[key]，例如element.style.bg，使用setter，我们可以将新值应用于element.style[key]，例如应用于element.style.bg。