jQueryで動的に文字のフォント色を変化させる方法（私はSharePoint画面開発で使いました）

はじめに

前回の記事でいいねをいただきまして、気分が良くなったので、
Tipsの記事を書かせていただきます。
Webの画面にて何かを選択したら、画面上のフォントの色を変えたい場合にお役に立てる記事です。
javascriptにてjQueryにてCSSで色を指定します。

本題です

以下コードをご覧ください。
簡単ですね、changeイベントがトリガーでcssで色を指定するだけです。
イベントはchange以外いろいろあると思うので、ターゲットとするDOM要素のとらえたい変化に合わせて変えてください。
ただ要注意です。変化イベントのときの鉄則ですが、
次の色の変化をさせる前に色を元に戻すこと
を忘れないでください！

changefontcolor.js

// 選択項目によって色を変化させるメソッド
function setColorItems(){
    // 変化させるDOMのID群
    var ArrayIDsRed = ["ID1","ID2",];    
    var ArrayIDsBlue = ["ID3","ID4"];
    var ArrayIDsAll = ["ID1","ID2","ID3","ID4"];

    $("#TargetID").change(function () {
        // 変化させたDOM要素で何の値に変更されたか取得
        var itemcontents = $("#TargetID").val();

        // 最初に色を元に戻す（前回の色が残ってしまうため）
        SetColorfont( ArrayIDsAll, 0 );
        // 何を選択したかによって色を変化させる
        if(itemcontents == "赤色に変化させる"){
           SetColorfont( ArrayIDsRed, 1 );
        }else if( itemcontents == "青色に変化させる"){
           SetColorfont( ArrayIDsBlue, 2 );
        }else{
           SetColorfont( ArrayIDsAll, 0 );
        }
    });
}

// ちょっと冗長だけど勘弁してください
function SetColorfont( arrayID , colorflg ){

    if(colorflg == 0){
        for (var i = 0; i < arrayID.length; i++) {
            $("#" + arrayID[i]).css('color','black');
        }
    }else if(colorflg == 1){
        for (var i = 0; i < arrayID.length; i++) {
            $("#" + arrayID[i]).css('color','red');
        }
    }else if(colorflg == 2){
        for (var i = 0; i < arrayID.length; i++) {
            $("#" + arrayID[i]).css('color','blue');
        }
    }else{
        // Do Nothing
    }

}

おわり

実行していないコードなので、間違いがあった場合はごめんなさい。
今回IDって？DOMって？これを使うhtmlが想像つかない！となったもっとより初心者のかた向けに記事を書こうと思いますので、
できた際はぜひ読んでください。
今回SharePointでの開発を行う上で学んだことを書かせていただきました、
日々日々進化成長がやみませぬ。。。
それではありがとうございました。