HTML DOM スタイルの backgroundColor プロパティとは？使い方を解説
backgroundColor プロパティは、要素の背景色を設定または取得するために使用されます。値は、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla() など、さまざまな形式で指定できます。
構文
backgroundColor プロパティの基本的な構文は以下のとおりです。
背景色を設定する場合：
object.style.backgroundColor = "color|transparent";
プロパティの値
このプロパティに指定できる値は、次の2種類です。
| 番号 | 値と説明 |
|---|---|
| 1 | Color（色） 要素の背景色を指定します。カラーネームや rgb()、rgba()、hsl()、hsla() などの形式が利用可能です。 |
| 2 | Transparent（透明） 背景色を透明に設定します。背後にあるコンテンツが透けて見えるようになります。これがデフォルト値です。 |
サンプルコード
ここで、backgroundColor プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、div 要素の背景色が動的に変更される仕組みです。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
background-color: rgba(10,122,102,0.1);
}
</style>
<script>
function changeBackColor(){
document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
document.getElementById("Sample").innerHTML="背景色が変更されました";
}
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>下のボタンをクリックして、上の div の背景色を変更してください</p>
<button onclick="changeBackColor()">CHANGE COLOR</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「CHANGE COLOR」ボタンをクリックすると、div 要素の背景色が rgba(1,200,55,0.5) の半透明の緑色に変化し、メッセージも表示されます。
このように、JavaScript の style オブジェクトを通じて backgroundColor プロパティにアクセスすることで、ユーザーの操作に応じてページの見た目を動的に変化させることができます。Web アプリケーションにおけるインタラクティブな UI 実装において、非常に便利なプロパティです。
-
HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説
HTML DOMのborderRightColorプロパティは、要素の右ボーダーの色を取得・設定するために使用されるスタイルプロパティです。JavaScriptから動的にボーダーの色を変更したい場合に活用できます。 borderRightColorプロパティの構文 borderRightColorプロパティを設定する場合の構文は以下のとおりです。 object.style.borderRightColor = color|transparent|initial|inherit 指定できる値の一覧 このプロパティには、以下の4つの値を指定できます。 値説明 color右ボーダーの色を
-
HTML DOMのstyle.colorプロパティとは？使い方とサンプルコードを解説
HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.