☰

JavaScript で複数の CSS スタイルを設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript coding-style
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

ベストアンサー1

CSSの値が文字列で、要素に他のCSSが設定されていない場合（または上書きを気にしない場合）、cssText財産:

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

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

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

これは、プロパティを変更するたびに要素を再描画する必要がなくなるため、ある意味では良いことです (何らかの方法ですべてを「一度に」変更します)。

一方、最初に文字列を構築する必要があります。

おすすめ記事