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);

Answer 2

您可以使用Object.assign()：

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

示例：

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

body {
  background-color: gray;
}

解析分配以将样式分配给DOM元素

2 个答案: