ionicを試す 7日目 ラジオボタンで文字色を変える
6日目の続きです。
まず、コマンドプロンプトを起動して以下の２つのコマンド入力してください。
(すでに起動しているならば不要です)
------------------------------------------
"cd c:\MyTest\test000"
"ionic serve"
------------------------------------------
まず"src\app\home\home.page.html"のラジオボタンが表示とvalueが同じ(例えば"Red"と"Red"）になっているので表示の方を日本語にします。(区別がつかないと誤解することがありますから)
また、どの文字列の色を変えるかを明示するために、<p>タグに"id"をつけます。
---------------------
<!--表示文字列-->
<p id="pColor">{{dispText}}</p>
---------------------
飾りの役目しか持たない<ion-list-header>の部分も削除します。
次に"src\app\home\home.page.ts"の関数"fnChangeRadio"に変更を加えます。
------------------------------------------
//ラジオボタン変更
fnChangeRadio(testtext:string){
alert(testtext);
//色の変更
let el = document.getElementById('pColor') as HTMLElement;
el.style.setProperty('color', this.dispText);
}
------------------------------------------
alert()はあえて残しました。
alertでOKを押下すると文字の色が変わるコードを追加しています。
変更したファイルをすべて保存してブラウザ上のアプリを更新してください。
ラジオボタンで色を選ぶと、Alertダイアログが表示され変更する色を告知します。
(この段階では文字の色は変わっていません)
OKを押下で、文字の色がラジオボタンで選んだ色になります。
さて、コメント『//色の変更』の下の2つの行の説明をします。
まず1行目。
idが'pColor'であるHTMLの要素（段落やボタン、色々な要素があります)を"el"と言う変数にセットする。
( as HTMLElement;はこの変数に入れるものはHTML要素であるという念押しです。)
続いて2行目。
変数"el"の'color'と言うプロパティ(これは文字色を表す)に変数"dispText"の中身をセットする。
これは実際のところ、少々危ういコードでもあります。
まず'pColor'と言うIDを持つHTML要素がなかったり複数あったり、有っても'color'プロパティをセットできるとは限りません。
また'color'プロパティに変数"dispText"の中身をセットしましたが、この値が'color'に入る値か保証はありません。
最後にデザインに定評があると言うionicですが、逆に言えば裏で表示関係(特に背景色)を設定していたりします。
これから実機テストの項目で出てくると思いますが、いきなりダークモードで表示されて驚くこともあるかと思います。
だいぶ驚かしましたが、色の変更を加えようとする時は、バックアップを取る事をお勧めします。
