JavaScriptでページの背景色を変える方法：変数に基づく色の切り替え

JavaScriptを使って、ページの項目の色を変数の結果に基づいて動的に変更することは十分に可能です。この記事では、JavaScriptの変数を使って、CSSで指定された色を変更する方法について解説します。具体的には、変数の値によってHTML要素の背景色を変更する方法を紹介します。

JavaScriptとCSSで色を動的に変更する基本的なアプローチ
HTMLとCSSの準備
JavaScriptで色を動的に変更する方法
動的にCSSクラスを切り替える方法
まとめ

JavaScriptとCSSで色を動的に変更する基本的なアプローチ

JavaScriptを使って、ページ上の特定の要素（例えば、``タグや`

`タグ）の色を変更するためには、DOMを操作する方法を学ぶ必要があります。CSSであらかじめ色の指定をしておき、JavaScriptの変数によってそれを動的に変更する方法は、次の手順で実行できます。

HTMLとCSSの準備

まず、HTMLとCSSを準備します。以下は、例として使用するHTMLとCSSコードです。

<html>
<head>
<style>
  .red { background-color: red; }
  .blue { background-color: blue; }
</style>
</head>
<body>
<span id="targetElement">この背景色を変更します</span>
</body>
</html>

JavaScriptで色を動的に変更する方法

次に、JavaScriptで`a`という変数の値をチェックし、それに基づいて``タグの背景色を変更する方法を見ていきましょう。

let a = 1; // 変数の値に基づいて色を変更
let element = document.getElementById("targetElement");

if (a === 1) {
  element.classList.add("red");
} else if (a === 2) {
  element.classList.add("blue");
}

上記のコードでは、`a`の値が1の場合は背景色を赤に、2の場合は青に変更します。CSSのクラスを追加することで背景色を変更しています。

動的にCSSクラスを切り替える方法

JavaScriptでCSSのクラスを切り替えることで、背景色を変更することができます。`classList.add()`を使用することで、あらかじめ定義されたCSSクラスを要素に追加することができます。逆に、`classList.remove()`を使用することで、不要なクラスを削除することも可能です。

if (a === 1) {
  element.classList.add("red");
  element.classList.remove("blue");
} else if (a === 2) {
  element.classList.add("blue");
  element.classList.remove("red");
}