javascript - 解构赋值以将样式分配给 DOM 元素

Question

JavaScript 有一个漂亮的 Destructuring assignment当从对象中的属性创建多个变量时，简写功能非常有效。

我想对按钮元素的样式执行类似的操作。这是我的工作代码:

var button = document.createElement('button');
button.style.background = '#30a900';
button.style.color = 'white';
button.style.border = '1px solid white';

我想做如下的事情:

var mystyles = {
    background: '#30a900',
    color: 'white',
    border: '1px solid white',
};
var button = document.createElement('button');
button.style = mystyles;

但是，这并没有按预期工作。 ES6 有一个功能可以完成这个任务吗？

Answer 1

怎么样Object.assign ？

var button = document.createElement('button');
button.innerText = 'Object.assign';
var mystyles = {
    background: '#30a900',
    color: 'white',
    border: '1px solid white',
};
Object.assign(button.style, mystyles);
document.body.appendChild(button);