【JavaScript】色選択ダイアログ chooseColorDlg

これはあまり知られていない技

↓のような色を選択するダイアログを表示できます。


これはコンポーネントなので、次のOBJECTタグを貼り付ける必要があります。(こういうのはHEADに納めるのがいいと思います。)
<OBJECT ID="ccdlg" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0" HEIGHT="0"></OBJECT>

↑を貼ると、chooseColorDlg関数が使えるようになります。この関数は、OBJECTに指定したIDに属します。(ccdlg.chooseColorDlg())

int chooseColorDlg(string initialColor)
initialColorはダイアログの選択色の初期値(0〜1677215、#rrggbb形式、blackなどの定義色名も可能)
返り値は選択された色の0〜16777215となる10進数値です。

返り値が複雑なので、toString(16)で16進数に置き換えます。
しかし#rrggbb形式にするには、6桁にしなければならないので、
"00000"を手前に連結させて、substringで右から6文字分を切り取ります。

ここではボタンを押すとダイアログが表示され、選択した色にボタンの文字色が変わるものを考えます。

SCRIPTタグ内にて、id.style.colorをダイアログで指定した色に変える関数changeTextColor(id)を定義します。

<SCRIPT LANGUAGE="JavaScript">
function changeTextColor(id){
var IniCol=id.style.color;
var NewCol=ccdlg.chooseColorDlg(IniCol);
NewCol=NewCol.toString(16);
NewCol="00000"+NewCol;
NewCol=NewCol.substring(NewCol.length-6,NewCol.length);
NewCol="#"+NewCol;
id.style.color=NewCol;
}
</SCRIPT>

自分自身(this)を引数に、changeTextColor(this)とした構文をONCLICKに指定したINPUTボタンを作ります。

<INPUT TYPE="button" VALUE="色選択ダイアログ" ONCLICK="changeTextColor(this)">

これで完成です。

SCRIPT部分もこれまたHEAD内に納めるべきでしょう。(OBJECTよりは後に。)
OBJECTはページが完全にロードされた後にロードされる(ような)ので、SCRIPT中でいきなり関数を呼び出しても動作しません(でした。経験談)
ONLOADで実行すると大丈夫な模様です。(経験談)