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

2022年10月20日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
１．文字色の変更
document.getElementById(idセレクター名).style.color=色の値;
[style.color]を指定して文字の色を変更します。

2.背景色の変更
document.getElementById(idセレクター名).style.backgroundColor=色の値;
「style.backgroundColor」を指定して文字の背景色を変更します

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>文字色と背景色の変更</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
   function change(){
    //文字色変更
    document.getElementById('cft').style.color='red';
    //背景色変更
    document.getElementById('cft').style.backgroundColor='skyblue';
  }

  </script>
</head>
<body>
  <div id="cft">test data</div>
  <p><button type="button" onclick="change();">変更</button></p>
</body>
</html>

結果
「変更」ボタンを押すと、文字色(red)、背景色(skyblue)を変更します。

JavaScript

Posted by arkgame

関連記事: