JS小功能（按钮选择颜色)简单实例

效果

代码：复制代码代码如下： head runat=' server ' title/title style type=' text/CSS ' # red { width : 260 px；高度： 200像素；背景# FF0000display:无；} #绿色{宽度： 260像素高度： 200像素；背景# 00FF00display:无；} #黄色{宽度： 260像素高度： 200像素；背景# FFFF00display:无；} #蓝色{ width: 260px高度： 200像素；背景# 0000FFdisplay:无；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var BTN=document。getelementsbytagname(' input ')；var div=文档。getelementsbytagname(' div ')；for(var I=0；长度；i ) { btn[i].索引=我；btn[i].onclick=function(){ for(var I=0；长度；BTN[我]。风格。背景=' '；} switch (this.value) { case '红色：这个。风格。背景=' # ff 0000打破；案例绿色：这个。风格。背景=' # 00FF00打破；案例黄色：这个。风格。背景=' # FFFF00打破；案例蓝色这个。风格。背景=' # 0000 ff打破；} for(var I=0；长度；I){ div[I]。风格。display=} div[这个。索引]。风格。display=' block} } };/脚本/流浆池输入类型='button' id='btn1' value='红色style='底色： # ff 0000 '/input type=' button ' id=' BTN 2 ' value='绿色/input type=' button ' id=' BTN 3 ' value='黄色/input type=' button ' id=' BTN 4 ' value='蓝色/div id=' red ' style=' display : block；/div div id='绿色/div div id='黄色/div div id='蓝色/div/body