把JavaScript代碼寫在css裡

<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專欄