网页风格切换
作者：chilleen
来源：
ITPOW
日期：2005-8-1
常见论坛都有风格切换的功能，通过点击按钮，网页由一种配色方案跳到另一种方案。
下面通过代码展示其原理。
首先准备两个CSS分别控制不同的风格。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css</title>
<link title="C1" rel="stylesheet" href="C1.css" type="text/css" />
<link title="C2" rel="alternate stylesheet" href="C2.css" type="text/css" />
</head>
<body>
<span class="foo">文字</span>
<script type="text/javascript" language="javascript">
<!--
function SetActiveStyleSheet(title)
{
for (var i=0; i<document.getElementsByTagName("link").length; i++)
{
//循环所有名称为link的标签
var e = document.getElementsByTagName("link")[i];
if (e.getAttribute("rel").indexOf("style") != -1)
{
//这个link标签的rel属性含style，证明其作用是链接CSS文件的
if (e.getAttribute("title") == title)
{
//当前link对应的CSS就是要使用的CSS，将disabled属性设置为false表示启用
e.disabled = false;
}
else
{
e.disabled = true;
}
}
}
}
-->
</script>
<input type="button" value="C1" onclick="SetActiveStyleSheet(this.value);">
<input type="button" value="C2" onclick="SetActiveStyleSheet(this.value);">
</body>
</html>
