jQuery 文字色と背景色を変更するサンプル
環境
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)を変更します。