主題的切換本質上來說即使：1、圖片的改變；2、顏色的改變。
以上兩點都是可以css控制的，所以在設計之初，就應該把需要被主題控制的css統一到一個css文件中，同一個主題的圖片也要分開歸類文件夾。
下面說一下Dojo的主題切換實現：
Html片段：
<link id="firstTheme" rel="stylesheet" type="text/css" href="/dojo/css/firstTheme.css" ></link> <link id="secondTheme" rel="stylesheet" type="text/css" href="/dojo/css/secondTheme.css" disabled="true"></link> <link id="thirdTheme" rel="stylesheet" type="text/css" href="/dojo/css/thirdTheme.css" disabled="true"></link>
從linked引入的css文件，有disabled屬性可以控制css是否可用。
JS片段：
function changeThemes(newThemes){ dojo.forEach(dojo.query("link"),function(link_theme){ if(link_theme.id != newThemes){ link_theme.disabled = true; }else{ link_theme.disabled = false; } }) }
通過對changeThemes("secondTheme")的調用，即實現了對link標簽disabled屬性的改變。
切換html，含方便的div半透明蒙板實現，下一步工作既是將之構成dojo類：
View Code
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主題</title> <style> .theme,.cover{ position:absolute; width:200px; height:160px; } div.container{ position:relative; width:200px; height:160px; float:left; margin-left:10px; } div.cover{ background-color:#333; opacity: 0.0; } b.description{ position:absolute; left:38%; top:40%; font-size:15px; color:#FFF; } </style> <script type="text/javascript"> dojo.require("dojo.fx"); dojo.query("div.cover").connect("mouseover",function(){ dojo.animateProperty({ node: this, duration:1000, properties: { opacity: 0.5 } }).play(); }); dojo.query("div.cover").connect("mouseout",function(){ dojo.animateProperty({ node: this, duration:1000, properties: { opacity: 0 } }).play(); }); </script> </head> <body> <div class="container"> <img class="theme" src="/dojo/resource/image/firstTheme/preview.jpg" /> <div class="cover" onClick="changeThemes('firstTheme')"><b class="description">--黑色--</b></div> </div> <div class="container"> <img class="theme" src="/dojo/resource/image/secondTheme/preview.jpg" /> <div class="cover" onClick="changeThemes('secondTheme')"><b class="description">--藍色--</b></div> </div> <div class="container"> <img class="theme" src="/dojo/resource/image/thirdTheme/preview.jpg" /> <div class="cover" onClick="changeThemes('thirdTheme')"><b class="description">--紅色--</b></div> </div> </body> </html>