主题的切换本质上来说即使：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>