解構賦值將樣式賦給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);

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