如何通过javascript动态改变按钮的css属性值

要实现的效果就是：
   按钮在正常的时候是透明的，没有边框的；
   按钮在鼠标移上之后就变成有背景色，有边框；
前后对比如下：
 
图1 正常显示的情况 
 
图2 鼠标移上到按钮之上时
这些按钮的html代码如下：

 

 1                  < input  runat =server  id =changestate  type =button  value ="显示添加曲线"  class =curvebutton  onmouseover ="buttonMouseOver('changestate')"  onmouseleave ="buttonMouseLeave('changestate')"  onserverclick ="changestate_Click"   />
 2                  < input  type ="hidden"  id ="hideinfo"  runat ="server"  value ="hide"   />                                             
 3                  < input  runat =server  id =privewbutton  type =button  value ="前一时段"  class =curvebutton  onmouseover ="buttonMouseOver('privewbutton')"  onmouseleave ="buttonMouseLeave('privewbutton')"  onserverclick ="changestate_Click"   />
 4                  < input  runat =server  id =currentbutton  type =button  value ="当前时段"  class =curvebutton  onmouseover ="buttonMouseOver('currentbutton')"  onmouseleave ="buttonMouseLeave('currentbutton')"  onserverclick ="changestate_Click"   />
 5                  < input  runat =server  id =nextbutton  type =button  value ="后一时段"  class =curvebutton  onmouseover ="buttonMouseOver('nextbutton')"  onmouseleave ="buttonMouseLeave('nextbutton')"  onserverclick ="changestate_Click"   />
 6                  < input  runat =server  id =refleshcurvebutton  type =button  value ="更新曲线"  class =curvebutton  onmouseover ="buttonMouseOver('refleshcurvebutton')"  onmouseleave ="buttonMouseLeave('refleshcurvebutton')"  onserverclick ="changestate_Click"   />
 7                  < input  runat =server  id =viewdatabutton  type =button  value ="察看数据"  class =curvebutton  onmouseover ="buttonMouseOver('viewdatabutton')"  onmouseleave ="buttonMouseLeave('viewdatabutton')"  onserverclick ="changestate_Click"   />
 8                  < input  runat =server  id =privewpagebutton  type =button  value ="上一页"  disabled =disabled  class =curvebutton  onmouseover ="buttonMouseOver('privewpagebutton')"  onmouseleave ="buttonMouseLeave('privewpagebutton')"  onserverclick ="changestate_Click"   />
 9                  < input  runat =server  id =nextpagebutton  type =button  value ="下一页"  disabled =disabled  class =curvebutton  onmouseover ="buttonMouseOver('nextpagebutton')"  onmouseleave ="buttonMouseLeave('nextpagebutton')"  onserverclick ="changestate_Click"   />
10

 其中用到的两个javascript函数的代码如下：

 

 1      < script language = javascript >   
 2          function  buttonMouseOver(source)
 3          {                                    
 4            try {                                 
 5                document.all(source).style.backgroundColor="#f1f1f1";
 6                document.all(source).style.border="solid 1px #cccccc";
 7            }
 8            catch(e){ alert(e)}
 9        }
10          function  buttonMouseLeave(source)
11          {            
12            try {                
13                document.all(source).style.backgroundColor="Transparent";
14                document.all(source).style.border="solid 0px #cccccc";
15            }
16            catch(e){ alert(e)}
17        }       
18      </ script >

 其中的css class  curvebutton的设置如下：

.curvebutton {} { background-color:Transparent; border-style:none; width:100%; cursor:pointer; text-align:left; padding-left:30px}

这样使用基本就没错喽。