把JavaScript代码写在css里

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

<script>   
    
//定义table的样式.cellSpacing,cellPadding   
//borderColorLight   ,borderColorDark.   
    
function   table3d(obj)   {   
obj.border=1;   
obj.cellSpacing=0;   
obj.cellPadding=0;   
obj.borderColorLight="#FFFFFF";   
obj.borderColorDark="#FFFFFF";   
}   
    
//定义td的样式.   bgColor   
//borderColorLight,   borderColorDark   
    
function   td3d(obj)   {   
obj.bgColor="#B7B7B7";   
obj.borderColorLight="#000000";   
obj.borderColorDark="#EEEEEE";   
}   
</script>   
    
<style>   
<!--定义样式-->   
.table3d{baobao:expression_r(table3d(this))}   
.td3d{baobao:expression_r(td3d(this))}   
</style>
<table width="200" border="0" class="td3d">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
expression这个命令上面，它可以让用户编写自定义的style class当然也就可以结合javascript来动态设定style class的样式。再举个例子，比如：
这里我们有一个表格，当mouse over在每一个行上的时候，行的背景色就变成灰色，移出来的时候就变回白色。一般的办法是像下面这样处理。

引用

<table border="1">
   <tr onmouseover="this.style.backgroundColor:#eeeeee" onmouseout="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr onmouseover="this.style.backgroundColor:#eeeeee" onmouseout="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr onmouseover="this.style.backgroundColor:#eeeeee" onmouseout="this.style.backgroundColor:#ffffff"><td>1</td></tr>
</table>

 

效果是实现了，但如果表格的行数太多的话，你就不得不COPY AND PASTE了。虽然都是重复性动作不碍事，但其实是一个无可耐何的办法。来，这次我们用expression来改进一去。把代码改一下，像这样。

 

引用

 

<style>
tr{background-color:expression_r(onmouseover=function() {this.style.backgroundColor="#eeeeee"}, onmouseout=function(){this.style.backgroundColor="#FFFFFF"})}
</style>
<table border="1">
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</table>

 

 

放在IE上面跑看看，效果是一样的喔，这样就省了不少时间来copy and paste了。

要注意的是，如果动态给属性赋值的话，这些语句要通过一个函数来包装。另外，如果只是想让那些拥有这个style class的元素执行一些javascript的话，这里的background-color可以是自定义的属性。

好，下面再来一个实例，看看如何动态设定元素的样式。

在一个表格中经常用到的就是把偶数行与奇数行区分出来，以帮助用户易于查看这些数据。好吧，来看看用expression怎样实现这个目的。

#javascript/ajax专栏