2009/02/15

閃爍 CSS

此練習利用改變 CSS 的特徵值,達成動態變化。此練習用到以下的特徵與方法:

  1. getElementById(id):取得元素的物件。
  2. style 物件:元素的風格物件,可利用此物件讀取或設定元素的風格。使用此物件時要注意:雖然風格表的特徵在 style 物件的命名有一定的規則,但是也有少數例外,例如 float。style 物件在不同瀏覽器,其儲存的資料格式有差異。所以使用時要多測試。
  3. className:讀取或設定元素的 CLASS 屬性字串。
  4. setTimeout():設定變化的時間間隔。
  5. toggleCSS(id, pty, v1, v2, ms):這是一個自定函式,用來改變元素的風格值。它有五個參數:id 是元素的識別名。pty 是風格的特徵名。v1, v2 是要變換的兩個特徵值。ms 是微秒時間,為變化的時間間隔。
  6. toggleClass(id, c1, c2, ms):這是一個自定函式,用來改變元素的風格值。它有四個參數:id 是元素的識別名。c1, c2 是要變換的兩個類別名。ms 是微秒時間,為變化的時間間隔。

toggleCSS() 示範。

toggleClass() 示範。