如何通过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}

这样使用基本就没错喽。