[操作法］色を選択(ｸﾘｯｸ)し、ﾍﾟｰｼﾞ内の任意の場所をｸﾘｯｸしてみて下さい。ｸﾘｯｸされたHTML要素の背景色が変更できます。
★何も無い場所をｸﾘｯｸすれば、ﾍﾟｰｼﾞの背景色を変更できます。
■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■
<script language="JavaScript"><!--
var col; //選択した色
var old_obj = null;//1つ前に選択した色を記憶しておく変数
function ActiveColor(obj){ //色がｸﾘｯｸされた時
if(old_obj != null){
//1つ前に選択した色の周りに表示されているｸﾞﾚｰ色を消す
old_obj.style.backgroundColor
= "";
}
//選択した色の周りにｸﾞﾚｰ色を付ける
obj.style.backgroundColor = "darkgray";
col = obj.style.color;//選択された色を保存
old_obj = obj; //現在の選択色を、1つ前として格納
//色をｸﾘｯｸした時にBgChange()関数が実行されないように
//ｲﾍﾞﾝﾄ階層の浮上(bubble up)をｷｬﾝｾﾙする
window.event.cancelBubble
= true;
}
function BgChange(){ //ﾍﾟｰｼﾞ内のHTML要素がｸﾘｯｸされた時
var sElem = event.srcElement; //ｸﾘｯｸされた要素を識別
sElem.style.backgroundColor = col;//その要素の背景色を設定
}
//--></script>
</head>
<body onclick="BgChange();">
<p>
<span style="color:red" onclick="ActiveColor(this);">■</span>
<span style="color:orange" onclick="ActiveColor(this);">■</span>
<span style="color:pink" onclick="ActiveColor(this);">■</span>
･･･(以下省略)･･･
</p>
END(99/7/9)