方法一：
用JS的setAttribute方法可以实现一个页面两份（或多份）CSS样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个默认的CSS，例如：
<link href="style-1.css" rel="stylesheet" type="text/css" id="css">
我定义的id是css。
第二步：写一个js函数，代码如下：
<script type="text/javascript">
function changeCss(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","style-1.css");
if (a==2)
css.setAttribute("href","style-2.css");
}
</script>
这个函数可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
<a href="#" onClick="changeCss(1)">第一种风格</a>
<a href="#" onClick="changeCss(2)">第二种风格</a>
该效果在IE和FF下均测试通过。这里需要注意的两点是：
1、在这个例子中函数名不能为links或者link，如果为links或者link，样式表将不被改变，可能是javascript的保留字符。
2、另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%。
方法二：
用按钮的方法实现，跟方面一样，准备两份CSS文件：style-1.css和style-2.css
JS写法：
<script>
function changeStyle(name){
css=document.getElementById("cssfile");
css.href=name+".css";
}
</script>
页面加入：
<input type="button" value="第一种风格" onclick="changeStyle('style-1');" />
<input type="button" value="第二种风格" onclick="changeStyle('style-2');" />
以上两种方法都很简单，但建议采用第二种，这样的话，哪怕你有 style-3.css......style-n.css 都可随便切换而不用改JS。
