[JavaScript] 文字色と背景色を変更する

投稿日：2016年10月2日更新日：2018年4月28日

JavaScriptで文字色と背景色を変更するサンプルです。

サンプルソース

例）id="target"要素の文字色を白、背景色を赤にする

function changeColor(idname){
  var obj = document.getElementById(idname);
  obj.style.color = '#ffffff';            //文字色を白にする
  obj.style.backgroundColor = '#ff0000';  //背景色を赤にする
}

function changeColor(idname){

var obj = document.getElementById(idname);

obj.style.color = '#ffffff'; //文字色を白にする

obj.style.backgroundColor = '#ff0000'; //背景色を赤にする

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <p id="target">ここの色が変わります</p>
  <input type="button" value=" ボタン " onclick="changeColor('target');" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p id="target">ここの色が変わります</p>

</body>

</html>

実行サンプル

ボタンを押すと、文字色と背景色が変わります。

ここの色が変わります

※元に戻したい場合は、[F5]キー等でリロードしてください。

解説

文字色の変更は、style.colorプロパティに色を指定します。
背景色の変更は、style.backgroundColorプロパティに色を指定します。
色の指定は、カラーコード（例：'#ff0000'）、カラーネーム（例：'red'）どちらでもOKです。
カラーコード、カラーネームは「"」または「'」で囲う必要があります。

執筆者：とら