Javascript, 網頁設計

[JS]動態變換CSS樣式(Yahoo為例)

梅干2008/12/19
  自從奇摩首頁改版後,不難發現除了整體的視覺效果提昇外,還新增許多的互動效果,讓使用者可自行設定操作界面與色彩,但神奇的是當變換色系時,畫面則會即時變更,不會出現重新整理的情形,那是否何辦到的呢?其方法相當的簡單,首先,先將樣式設定好,每個色系都有個自獨立的CSS檔,當使用者觸發變色時,再將該色系的樣式載入進來。
  為了方便解說,因此就容許梅干桑偷懶一下,直接用替換整張圖片的方式,但原理是一樣的,只要將各塊狀的圖示與顏色設定好,之後就剩下切換的動作啦!而切換也相當的簡易,梅干桑寫了簡短幾行的javascript來作切換,接下來就與各位一同來分享梅干桑的製作方法啦!
放在<head>...</head>之間
<link href="css/style01.css" rel="stylesheet" type="text/css" id="cssStyle">

<script type="text/javascript">
  function mm_changeStyle(file){
   document.getElementById("cssStyle").setAttribute("href",file);
}
</script>

放在<body>...</body>之間
<img src="img/changeStylebt.gif" alt="" width="101" height="4" usemap="#Map" border="0"/>
<map name="Map" id="Map">
   <area shape="rect" coords="39,15,50,27" 
   href="javascript:mm_changeStyle('css/style01.css');" />
   <area shape="rect" coords="56,15,68,26" 
   href="javascript:mm_changeStyle('css/style02.css');" />
  <area shape="rect" coords="73,15,84,27" 
   href="javascript:mm_changeStyle('css/style03.css');"/>
</map>

[範例預覽] [範例下載]
UAG軍規iPhone防摔殼