便利eelife Java Script

   戻る

セレクトメニューで背景を変更。
   



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">背景色が変わります:<BR>
<SELECT name="list" style="font-size : 24px;color : yellow;background-color : green;">
<OPTION value="#00ff00" selected>Lime</OPTION>
<OPTION value="#ff0000">Red</OPTION>
<OPTION value="#0000ff">Blue</OPTION>
<OPTION value="#000000">Black</OPTION>
<OPTION value="#808080">Gray</OPTION>
<OPTION value="#C0C0C0">Silver</OPTION>
<OPTION value="#ffffff">White</OPTION>
<OPTION value="#800000">Maroon</OPTION>
<OPTION value="#008000">Green</OPTION>
<OPTION value="#000080">Navy</OPTION>
<OPTION value="#800080">Purple</OPTION>
<OPTION value="#808000">Plive</OPTION>
<OPTION value="#008080">Teal</OPTION>
<OPTION value="#ffff00">Yellow</OPTION>
<OPTION value="#ff00ff">Fuchsia</OPTION>
<OPTION value="#00ffff">Aqua</OPTION>
</SELECT>&nbsp;&nbsp;&nbsp;<INPUT onclick="chgclr()" type="button" value="変更"></FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
function chgclr() {
bgclr = document.myFORM.list.selectedIndex;   // selectのindexを取得 Limeなら 0 Red なら 2 ・・・を返す
txt_val=document.myFORM.list.options[bgclr].text;  // 項目の値 Red,Blue・・・・・
opt_val= document.myFORM.list.options[bgclr].value;  // OPTIONの値 #00ff00,#ff0000・・・・

document.bgColor = opt_val;  // 背景色の変更
alert(txt_val+"のカラーコードは"+opt_val+"です。");  //  それぞれの値の表示
}
// -->
</SCRIPT>
コメント
オプションメニュー

alert()

style="font-size : 24px;color : yellow;background-color : green;" :
スタイルの設定で文字サイズを24px 色をyellow 背景をgreen にしています。