JavaScript 文字色と背景色を変更するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
1.文字色の変更
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">変更</button></p> </body> </html>
結果
「変更」ボタンを押すと、文字色(red)、背景色(skyblue)を変更します。