把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怎样实现这个目的。

posted @ 2006-12-29 10:31  netcorner  阅读(377)  评论(0编辑  收藏  举报