Raw JavaScriptを使用して要素に複数のスタイルを追加する方法（jQueryなし！）

生のバニラJavaScriptを使用して要素に複数のスタイルを追加すると、少し不格好に感じる可能性があります。プレーンJavaScriptを使用して要素のスタイルを設定するために私が見た最も一般的なアプローチは、ターゲット要素を取得してから、一度に1つのスタイルを追加することです。

// Grab target element (here via its class attribute)
const buttonAddToCart = document.querySelector(".button-add-to-cart")

// Add style properties, one at a time
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"

動作しますが、冗長であり、繰り返しが多すぎて、コードを再利用できません。名前付き関数の代わりに無名関数を使用するようなものです。

上記の代わりに、スタイルオブジェクトを使用できます：

// Create a style object
const buttonPrimary = {
  backgroundColor: "#82b97e",
  color: "#fff",
  padding: "24px",
  textTransform: "uppercase",
  letterSpacing: "0.1em",
}

// Assign buttonPrimary (style object) to button element
Object.assign(buttonAddToCart.style, buttonPrimary)

このアプローチはよりクリーンであるだけでなく、このbuttonPrimaryを適用することもできます プライマリボタンスタイルを必要とするボタン要素のスタイルオブジェクトを作成し、繰り返しコードを記述しないようにします。

スタイルオブジェクトを複数の要素に適用するコード例

待って、なぜJavaScriptを使用してHTMLのスタイルを設定するのですか？ CSSの代わりに要素？

申し訳ありませんが、私は餌をとっていません。JSのCSS、またはJSSは、CSSとJSのシーンで話題になっていますが、この戦いには犬がいません。私は両方のアプローチが好きです。 コンテキストを使用することをお勧めします あなたが下す決定の背後にある推進力として。

ただし、JavaScriptを使用したスタイリングが便利な場合に備えて説明します。要素のスタイルを定義するCSSスタイルシートに直接アクセスできない状況にあるとしましょう。この状況では、JavaScriptを使用して既存のスタイルをスタイル設定/上書きできることは、クライアントの問題を迅速に解決することと、おそらくその日に解決しないことの違いになる可能性があります。

このタイプのシナリオでは、JavaScriptの多様性が際立っています。