动态改css的问题，在线等待，向各位大侠学习呀！

Question

<style>
.sty1{
overflow:hidden;
z-index:19;
border:solid 1px #8A867A;
position:absolute;
background: #DCDCDC;
}
.sty2{
filter:progid:DXImageTransform.Microsoft.fade(duration=0.4)progid:DXImageTransform.Microsoft.Shadow(color=aaaaaa,Direction=115,Strength=4);
overflow:hidden;
z-index:19;
border:solid 1px #8A867A;
position:absolute;
background: #DCDCDC}
</style><div class=sty1 onmouseover="this.className='sty2';" onmouseout="this.className='';">
aaaaaaa
</div>

Answer 1

<style>
.1
{
overflow : hidden;
z-index : 19px;
border : solid 1px #8A867A;
position : absolute;
background : #DCDCDC
}
.2
{
filter:
progid:DXImageTransform.Microsoft.fade(duration=0.4)
progid:DXImageTransform.Microsoft.Shadow(color=aaaaaa,Direction=115,Strength=4);
overflow : hidden;
z-index : 19px;
border : solid 1px #8A867A;
position : absolute;
background : #DCDCDC;
}
</style><div id=menu2 class="1">aaaaaaa</div><br><br><input type=button value="ChangeCSS" onclick="menu2.className='2'"><br>
<input type=button value="ChangeBGColor" onclick="menu2.style.background='#FF0000'">

Answer 2

<button onclick="change()">change</button>
<div id=o>this is in div</div><script>
var a=[];
var i=0;
function change(){
  a[0]="border:2px red solid;background-color:gray;width:400px;height:200px"
  a[1]="border:2px blue solid;background-color:green;width:400px;height:200px"
  a[2]="border:2px black solid;background-color:menu;width:400px;height:200px"
  o.style.cssText=a[(++i)%3]
}
</script>

Answer 3

还有一点，能不能用this.style.filter=''来改变？这样写对吗？不对的话应该如何写呢？