[解決済み】JavaScriptで複数のCSSスタイルを設定するには？

質問

以下のようなJavaScriptの変数があります。

var fontsize = "12px"
var left= "200px"
var top= "100px"

このように繰り返し自分の要素に設定することができることは知っています。

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

このように、一度にまとめて設定することは可能でしょうか？

document.getElementById("myElement").style = allMyStyle 

解決方法は？

CSSの値を文字列で指定し、その要素に他のCSSがすでに設定されていない場合（あるいは上書きを気にしない場合）は cssText プロパティ :

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

を使用することもできます。 テンプレート・リテラル を使えば、より簡単で読みやすい複数行のCSSのような構文になります。

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

これはある意味良いことで、プロパティを変更するたびに要素を再描画することを避けることができます（何らかの方法で、すべての "at once" を変更するのです）。

その反面、文字列を先に構築する必要があります。