DOM要素にスタイルを割り当てるためのデストラクションの割り当て

Question

JavaScriptは、オブジェクト内のプロパティから複数の変数を作成するときにうまく機能する、巧妙なDestructuring assignmentショートハンド機能を備えています。

私は、ボタン要素のスタイルと同様のことをしたいと思います。予想通り

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

しかし、これは動作しません：私は、次のような何かをしたい

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

：ここに私の作業コードです。この割り当てを行うための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; 
 
}