网页风格切换

作者:chilleen 来源:千一网络 日期: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>
相关文章
文章评论
  • 1 楼:Instant Phone Cards
    Instant phone cards and calling cards with 24/7 customer service, secure payment, instant pin delivery.