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

2022年10月21日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0

構文
1.文字色の変更
$(セレクター名).css(“color",文字色の値);
2.背景色の変更
$(セレクター名).css(“background-color",背景色の値);

使用例

<!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() {
    // ボタンのclick動作
    $("#btnchg").click(function() {
      //文字色変更
      $("#cft").css("color","red");
      //背景変更
      $("#cft").css("background-color","skyblue");
    });
  });
  </script>
</head>
<body>
  <div id="cft">test data</div>
  <p><button type="button" id="btnchg" >変更</button></p>
</body>
</html>

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

jQuery

Posted by arkgame

関連記事: