JavaScriptを使用してHTML要素の背景色をCSSプロパティで設定する方法

このチュートリアルでは、JavaScriptを使用してHTML要素の背景色をCSSプロパティで設定する方法について説明します。

方法

HTML要素の背景色を設定するには、以下の3つの方法があります。

style属性

HTML要素のstyle属性を使用して、直接CSSプロパティを指定できます。

<div id="my-element" style="background-color: red;"></div>

element.styleオブジェクト

JavaScriptのelement.styleオブジェクトを使用して、動的にCSSプロパティを設定できます。

<div id="my-element"></div>

const element = document.getElementById("my-element");
element.style.backgroundColor = "red";

CSSStyleSheetオブジェクト

JavaScriptのCSSStyleSheetオブジェクトを使用して、スタイルシートに新しいルールを追加できます。

<div id="my-element"></div>

const styleSheet = document.styleSheets[0];
styleSheet.insertRule("#my-element { background-color: red; }", 0);

例

以下の例では、ボタンをクリックすると、div要素の背景色が赤色に変わります。

<button onclick="changeColor()">Change Color</button>
<div id="my-element"></div>

<script>
function changeColor() {
  const element = document.getElementById("my-element");
  element.style.backgroundColor = "red";
}
</script>

詳細

• 上記の例では、redという色を使用していますが、他の色名やRGB値、HEXコードなどを指定することもできます。
• 複数の要素の背景色を変更したい場合は、ループ処理などを利用します。
• より複雑なアニメーションなどを実現したい場合は、JavaScriptライブラリなどを利用すると便利です。

<button onclick="changeColor()">背景色を変更</button>
<div id="my-element"></div>

JavaScript

function changeColor() {
  // 要素を取得
  const element = document.getElementById("my-element");

  // 背景色を設定
  element.style.backgroundColor = "red";
}

解説

このコードは、以下の処理を行います。

1. changeColor()関数を定義します。
2. getElementById()関数を使用して、my-elementというIDを持つ要素を取得します。
3. 取得した要素のstyleプロパティのbackgroundColorプロパティにredという値を設定します。

実行

このコードをHTMLファイルに保存し、ブラウザで開きます。背景色を変更ボタンをクリックすると、div要素の背景色が赤色に変わります。

応用

このコードを応用することで、さまざまな要素の背景色を動的に変更することができます。

• ボタンの色を変える
• マウスオーバー時に背景色を変える
• スクロールに応じて背景色を変える

HTML要素の背景色を設定する他の方法

CSSクラス

HTML要素にCSSクラスを適用することで、背景色を設定できます。

HTML

<div class="my-class"></div>

CSS

.my-class {
  background-color: red;
}

CSSインラインスタイル

HTML要素のstyle属性に直接CSSスタイルを記述することで、背景色を設定できます。

<div style="background-color: red;"></div>

CSSフレームワーク

BootstrapなどのCSSフレームワークを使用すると、簡単に背景色を設定できます。

<div class="btn btn-primary">ボタン</div>

.btn-primary {
  background-color: #007bff;
}

どの方法を使用するべきか

どの方法を使用するべきかは、状況によって異なります。

• 1つの要素のみの背景色を変更したい場合は、style属性を使用するのが最も簡単です。
• 複数の要素の背景色を変更したい場合は、CSSクラスを使用するのが効率的です。
• より複雑なスタイルを設定したい場合は、CSSフレームワークを使用するのが便利です。