【My Script】 sample:
javascript 【スクロールバー】 scrollbar
スクロールバーの色を変える(javascriptによるカラーリングテスト)
◆スポンサー【dblpar.com】(ダブルパー本舗)をみる
◆このページのホーム【My Script】を全部をみる
Sample サンプルとTips
|
【Sample】 ※テキストエリアのカラーリングテストを実行します。 ※いろいろな色を組み合わせてバランス調整して下さい。 ■スクロールバー
【注意】 ※IE(インターネットエクスプローラ)5.0以上の専用機能
■XHTMLサンプル (class/width等及びクリップボード関連は省略) ※カラー選択ダイアログ---IE専用機能 <object id="ColDialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"> </object> ※テスト用テキストエリア <textarea id="txtArea1" wrap="off"> ◇カラーリングテスト用テスキトエリア ... </textarea> ※色選択リンク文字---一部のみ記述 <table cellpadding="0" cellspacing="1" border="0"> <tr> <td>◇ベースカラー</td> <td> <input type="text" id="txtFild21" size="10" readonly="readonly" /> </td> <td> <a href="javascript://" onclick="fnChgCol2('txtFild21',1)">色選択</a>/<a href="javascript://" onclick="fnReset2('txtFild21',1)">元に戻す</a> </td> </tr> <tr> <td>◇scrollない部分</td> <td> <input type="text" id="txtFild22" size="10" readonly="readonly" /> </td> <td> <a href="javascript://" onclick="fnChgCol2('txtFild22',2)">色選択</a>/<a href="javascript://" onclick="fnReset2('txtFild22',2)">元に戻す</a> </td> </tr> ... </table> |
■javascriptサンプル Tips (クリップボード関連及びCSS書き出しの部分は省略) function fnChgCol1(strTxtFild,f){ strColor=ColDialog.ChooseColorDlg(); //カラーダイアログ(戻り値は10進数のカラーコード) if(strColor==false){ return false; }else{ strColor="000000"+strColor.toString(16); //16進数カラーコードに変換 strColor=strColor.substring(strColor.length-6,strColor.length); //16進数カラーコード右端6桁のみを取得 strColor="#"+strColor; //#記号を付加 } with(document){ if(f==1){ //テキストエリア背景 getElementById("txtArea1").style.backgroundColor=strColor; }else if(f==2){ //テキストエリア文字色 getElementById("txtArea1").style.color=strColor; } getElementById(strTxtFild).style.backgroundColor=strColor; getElementById(strTxtFild).value=strColor; } } function fnReset1(strTxtFild,f){ with(document){ if(f==1){ //テキストエリア背景 getElementById("txtArea1").style.backgroundColor=""; }else if(f==2){ //テキストエリア文字色 getElementById("txtArea1").style.color=""; } getElementById(strTxtFild).style.backgroundColor=""; getElementById(strTxtFild).value=""; } } function fnChgCol2(strTxtFild,f){ strColor=ColDialog.ChooseColorDlg(); //カラーダイアログ(戻り値は10進数のカラーコード) if(strColor==false){ return false; }else{ strColor="000000"+strColor.toString(16); //16進数カラーコードに変換 strColor=strColor.substring(strColor.length-6,strColor.length); //16進数カラーコード右端6桁のみを取得 strColor="#"+strColor; //#記号を付加 } with(document){ switch(f){ case 1: //ベースカラー getElementById("txtArea1").style.scrollbarBaseColor=strColor; break; case 2: //スクロールのない部分 getElementById("txtArea1").style.scrollbarTrackColor=strColor; break; case 3: //スクロールバーの表面 getElementById("txtArea1").style.scrollbarFaceColor=strColor; break; case 4: //矢印の色 getElementById("txtArea1").style.scrollbarArrowColor=strColor; break; case 5: //外枠の左と左上の色 getElementById("txtArea1").style.scrollbar3dLightColor=strColor; break; case 6: //外枠の右と右下の色 getElementById("txtArea1").style.scrollbarDarkShadowColor=strColor; break; case 7: //内側の枠の右と右下の色 getElementById("txtArea1").style.scrollbarShadowColor=strColor; break; } getElementById(strTxtFild).style.backgroundColor=strColor; getElementById(strTxtFild).value=strColor; } } function fnReset2(strTxtFild,f){ with(document){ switch(f){ case 1: //ベースカラー getElementById("txtArea1").style.scrollbarBaseColor=""; break; case 2: //スクロールのない部分 getElementById("txtArea1").style.scrollbarTrackColor=""; break; case 3: //スクロールバーの表面 getElementById("txtArea1").style.scrollbarFaceColor=""; break; case 4: //矢印の色 getElementById("txtArea1").style.scrollbarArrowColor=""; break; case 5: //外枠の左と左上の色 getElementById("txtArea1").style.scrollbar3dLightColor=""; break; case 6: //外枠の右と右下の色 getElementById("txtArea1").style.scrollbarDarkShadowColor=""; break; case 7: //内側の枠の右と右下の色 getElementById("txtArea1").style.scrollbarShadowColor=""; break; } getElementById(strTxtFild).style.backgroundColor=""; getElementById(strTxtFild).value=""; } } |
- 【更新記録】
- ※(2008.04.03) v1.01 作成しました。