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.style.color = "color | initial | inherit"
それぞれの値の意味は以下の表のとおりです。
| 値 | 説明 |
|---|---|
| color | テキストに適用する色の値を指定します。 |
| initial | このプロパティを初期値（デフォルト値）に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
style.colorプロパティの使用例
それでは、実際にcolorプロパティを使用したサンプルコードを見てみましょう。ボタンをクリックすると、段落ごとに交互に異なる色が適用される仕組みです。
サンプルコード
<!DOCTYPE html>
<html>
<body>
<h1>colorプロパティの使用例</h1>
<p>これは段落1です</p>
<p>これは段落2です</p>
<p>これは段落3です</p>
<p>これは段落4です</p>
<p>これは段落5です</p>
<p>下のボタンをクリックすると、上の段落の文字色が変わります</p>
<button type="button" onclick="ChangeColor()">文字色を変更する</button>
<script>
function ChangeColor() {
for(var i=0;i<5;i++){
if(i%2==0)
document.getElementsByTagName("P")[i].style.color="blue";
else
document.getElementsByTagName("P")[i].style.color="red";
}
}
</script>
</body>
</html>実行結果
ページを表示すると、最初はすべての段落がデフォルトの黒色で表示されます。
ここで「文字色を変更する」ボタンをクリックすると、JavaScriptのforループによって各段落が走査され、偶数番目の段落には青色（blue）、奇数番目の段落には赤色（red）が交互に適用されます。
このように、style.colorプロパティを使えば、JavaScriptから動的にテキストの色を制御できます。条件分岐と組み合わせることで、特定の要素だけ色を変えたり、ユーザーの操作に応じてデザインを切り替えたりすることも可能です。
-
HTML DOMのborderTopColorプロパティの使い方を徹底解説
HTML DOMのborderTopColorプロパティは、要素の上境界線（トップボーダー）の色を取得または設定するために使用されます。JavaScriptから動的にボーダーの色を変更したい場合に非常に便利なプロパティです。構文borderTopColorプロパティを設定する際の基本的な構文は以下のとおりです。object.style.borderTopColor = color|transparent|initial|inherit設定できる値値説明color上境界線の色を指定します。デフォルトの色は黒に設定されています。transparent上境界線の色を透明にし、背後にあるコンテンツが見
-
HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説
HTML DOMのborderRightColorプロパティは、要素の右ボーダーの色を取得・設定するために使用されるスタイルプロパティです。JavaScriptから動的にボーダーの色を変更したい場合に活用できます。 borderRightColorプロパティの構文 borderRightColorプロパティを設定する場合の構文は以下のとおりです。 object.style.borderRightColor = color|transparent|initial|inherit 指定できる値の一覧 このプロパティには、以下の4つの値を指定できます。 値説明 color右ボーダーの色を