此練習利用改變 CSS 的特徵值，達成動態變化。此練習用到以下的特徵與方法：
- getElementById(id)：取得元素的物件。
- style 物件：元素的風格物件，可利用此物件讀取或設定元素的風格。使用此物件時要注意：雖然風格表的特徵在 style 物件的命名有一定的規則，但是也有少數例外，例如 float。style 物件在不同瀏覽器，其儲存的資料格式有差異。所以使用時要多測試。
- className：讀取或設定元素的 CLASS 屬性字串。
- setTimeout()：設定變化的時間間隔。
- toggleCSS(id, pty, v1, v2, ms)：這是一個自定函式，用來改變元素的風格值。它有五個參數：id 是元素的識別名。pty 是風格的特徵名。v1, v2 是要變換的兩個特徵值。ms 是微秒時間，為變化的時間間隔。
- toggleClass(id, c1, c2, ms)：這是一個自定函式，用來改變元素的風格值。它有四個參數：id 是元素的識別名。c1, c2 是要變換的兩個類別名。ms 是微秒時間，為變化的時間間隔。
toggleCSS() 示範。
- 風格用法：
<span id='test'>變色龍</span>
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "color", "red", "green", 500);
toggleCSS("test", "backgroundColor", "blue", "yellow", 700);
</script> - 執行結果：變色龍
toggleClass() 示範。
- 風格用法：
<style type='text/css'>
.grv {border:groove 16px red}
.rdg {border:ridge 16px blue}
</style>
<span id='cls'>邊線變化</span>
<script type='text/javascript'>
function toggleClass(id, c1, c2, ms)
{
var o=document.getElementById(id);
o.className= (o.className == c1 ) ? c2 : c1;
setTimeout('toggleClass("'+id+'","'+c1+'","'+c2+'",'+ms+')', ms);
}
toggleClass("cls", "grv", "rdg", 500);
</script> - 執行結果： 邊線變化
