< 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來動態(tài)設定style?class的樣式。再舉個例子，比如：
這里我們有一個表格，當mouse?over在每一個行上的時候，行的背景色就變成灰色，移出來的時候就變回白色。一般的辦法是像下面這樣處理。

引用

<table?border="1">
???<tr?οnmοuseοver="this.style.backgroundColor:#eeeeee"?οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr?οnmοuseοver="this.style.backgroundColor:#eeeeee"?οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
<tr?οnmοuseοver="this.style.backgroundColor:#eeeeee"?οnmοuseοut="this.style.backgroundColor:#ffffff"><td>1</td></tr>
</table>

?

效果是實現(xiàn)了，但如果表格的行數(shù)太多的話，你就不得不COPY?AND?PASTE了。雖然都是重復性動作不礙事，但其實是一個無可耐何的辦法。來，這次我們用expression來改進一去。把代碼改一下，像這樣。

?

引用

?

<style>
tr{background-color:expression_r(οnmοuseοver=function()?{this.style.backgroundColor="#eeeeee"},?οnmοuseοut=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了。

要注意的是，如果動態(tài)給屬性賦值的話，這些語句要通過一個函數(shù)來包裝。另外，如果只是想讓那些擁有這個style?class的元素執(zhí)行一些javascript的話，這里的background-color可以是自定義的屬性。

好，下面再來一個實例，看看如何動態(tài)設定元素的樣式。

在一個表格中經常用到的就是把偶數(shù)行與奇數(shù)行區(qū)分出來，以幫助用戶易于查看這些數(shù)據(jù)。好吧，來看看用expression怎樣實現(xiàn)這個目的。

#javascript/ajax專欄

轉載于:https://www.cnblogs.com/netcorner/archive/2006/12/29/2912453.html

總結

以上是生活随笔為你收集整理的把JavaScript代码写在css里的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。