Javascript动态改变按钮样式

 

主要用到button的onmouseover, onmouseout ,onclick事件，鼠标移到按钮上，按钮的透明度发生改变，移出按钮透明度恢复。点击按钮，被点击按钮背景色改变，点击下一按钮该按钮背景色改变，上一按钮背景色恢复。效果如上图，代码如下。详细介绍见代码注释:

将下列代码放置于head区域:

<script language=javascript>
 var preButtonID="null";  //变量用来储存上一被点按钮的ID，并定义初始值为null
 
 function buttonMouseOver(buttonID){
  document.getElementById(buttonID).filters.alpha.opacity=60;
  //鼠标移上时改变相应ID按钮的透明度
 }
 function buttonMouseOut(buttonID){
  document.getElementById(buttonID).filters.alpha.opacity=100;
  //鼠标移出时改变相应ID按钮的透明度
 }
 function buttonMouseClick(buttonID){
  if (preButtonID!="null"){//如果上一按钮的ID不为初值null，则把上一按扭的背景色恢复
   document.getElementById(preButtonID).style.backgroundColor="#CCCCCC";
  }
  document.getElementById(buttonID).style.backgroundColor="#FF0000";
  //改变被点击按钮的背景色
  preButtonID=buttonID;//把被点击按钮的ID赋给“上一按钮”变量
 }
</script>
<style type="text/css" >
.myInput{
 filter:alpha(opacity=100); /*此句不能删除，如果没有，JS中无法控制按钮的透明度*/
 border:0px;
 background-color:#CCCCCC;
 font-family: sans-serif, Arial, Helvetica;
}
</style>

以下代码放在body区域:

<input type=button value=BUTTON1 name=button1 id=button1  class=myInput onclick="buttonMouseClick(this.id)"  onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON2 name=button2 id=button2  class=myInput onclick="buttonMouseClick(this.id)"  onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON3 name=button3 id=button3  class=myInput onclick="buttonMouseClick(this.id)"  onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON4 name=button4 id=button4  class=myInput onclick="buttonMouseClick(this.id)"  onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON5 name=button5 id=button5  class=myInput onclick="buttonMouseClick(this.id)"  onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
 

自己可以手动设置透明度和点击后的背景颜色,是一种不错的效果.