今回は「style.color」のメソッドについて。
JavaScript側で色を操作したいときに使えます。
style.colorメソッドとは？
「style.color」とは、要素スタイル属性のcolorプロパティの値を取得、もしくは設定するメソッドのこと。
文字色を変えたりできます。
構文はこちら。
element.style.color
サンプルプログラムを書いてみよう
それでは、実際に「style.color」を使ってサンプルプログラムを書いてみましょう。
HTML
HTMLコードはこちら。
<div id="text">文字色が変わります！</div> <input type="button" id="btn" value="クリック！">
まずは、文字色を変えたいdivタグに「id=’text’」を指定。
次に、クリックできるようにボタンを用意し、後でJavaScriptで操作できるように「id=’btn’」を指定します。
JavaScript
JavaScriptコードはこちら。
let text = document.getElementById('text');
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
text.style.color = 'red';
});
// →テキストの色が赤色になる
まずは、文字色を変えたいテキストに指定された「id=’text’」を変数textに代入。
次に、ボタンに指定された「id=’btn’」を変数btnに代入し、JavaScriptでDOM操作ができるようにします。
そして、変数btnをクリックしたらイベントが発生するようにアロー関数を組みます。
アロー関数の中に、textの文字色を赤に変えるプログラムを書きます。
これでボタンをクリックしてみると、結果的に文字が赤色に変わりました。
まとめ
以上が、「style.color」の使い方でした。
