javascript+CSS实现网页样式动态切换
本文提供一个网站样式动态切换的实例代码,不多说直接看代码:
首先先看一下HTML代码,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" language="javascript" src="script.js"></script>
<link href="core.css" type="text/css" rel="stylesheet" />
<link href="contrast.css" type="text/css" rel="alternate stylesheet"   title="Higher Contrast"/>
<link href="hot.css" type="text/css" rel="alternate stylesheet" title="Gratuitous CSS" />

<style type="text/css">
#switcher ul{
list-style:none;
}
#switcher li{
float:right;
padding:0 0 0 5px;
}
</style>
<title>javascript+CSS实现网页样式动态切换-http://www.web2bar.cn/ 网站制作教程</title>
</head>
<body>
<div id="switcher">
 <ul>
   <li id="style-default"><a href="untitled33.html" onclick="activeCSS('default');return false">Default style</a></li>
   <li id="style-contrast"><a href="untitled33.html" onclick="activeCSS('Higher Contrast');return false">Higher Contrast</a></li>
   <li id="style-hot"><a href="untitled33.html" onclick="activeCSS('Gratuitous CSS');return false">Gratuitous CSS</a></li>
 </ul>
</div>
<div id="container">
   <div id="content">
    <h1>javascript+CSS实现网页样式动态切换h1>
    <p><span class="lead">javascript+CSS实现网页样式动态切换span>javascript+CSS实现网页样式动态切换</p>
    <p id="blurb">
javascript+CSS实现网页样式动态切换javascript+CSS实现网页样式动态切换.. </p>
    <p>javascript+CSS实现网页样式动态切换。</p>
    <h2>javascript+CSS实现网页样式动态切换。 </h2>
    <p><img src="../Pictrue/gudian.jpg" />javascript+CSS实现网页样式动态切换javascript+CSS实现网页样式动态切换javascript+CSS实现网页样式动态切换javascript+CSS实现网页样式动态切换？ </p>
   </div>
</div>
</body>
</html>
下面是CSS代码
/* CSS Document */
body{
background:#000;
color:#ddd;
}
h1,h2{
color:#fff;
font-weight:bold;
}
#content{
font-size:1.1em;
}
#content h2{
font-size:1.6em;
text-decoration:none;
}
#content #blurb{
background:#222;
border-color:#444;
color:#ff9;
}
span.lead{
font-weight:bold;
}
下面是CSS代码
/* CSS Document */
body
{
background:#fff;
color:#444;
font:62.5%/1.6em "Lucida Grande", Verdana, Geneva,Helvetica,Arial,sans-serif;
}
a{
color:#c60;
}
a:hover{
color:#F60;
text-decoration:none;
}
h1,h2{
color:#B61;
line-height:1em;
font-weight:normal;
font-family:Helvetica,Arial,Geneva,Verdana,sans-serif;
margin:1em 0;
padding:0;
}
h1{
font-size:2.2em;
}
#container{
margin:0 auto;
max-width:60em;
}
#content h2{
font-size:1.2em;
text-transform:uppercase;
}
#content p{
font-size:1.1em;
line-height:1.6em;
}
#content img.portrait{
float:right;
margin:0 0 1em 1em;
}
#content span.lead{
text-transform:uppercase;
}
#content #blurb{
background:#FFC;
border:1px dotted #FC6;
color:#000;
font-size:1.5em;
line-height:1.4em;
padding:.5em;
text-align:center;
}
下面是CSS代码
/* CSS Document */

body{
color:#FF9900;
background:#fff;
}
h1,h2{
color:#FF9900;
line-height:1em;
font-weight:normal;
font-family:Helvetica,Arial,Geneva,Verdana,sans-serif;
font-weight:normal;
text-align:center;
text-transform:none;
}
#content{
font-size:1.1em;
}
#content h1{
font:2.6em Zapfino,"Gill Sans",Gill,Palitino,"Times New Roman",Times,serif;
}
#content h2{
font:1.6em "Gill Sans",Gill,Palatino,"Times New Roman",Times,serif;
margin:0.82em 0;
text-transform:uppercase;
}
#content #blurb{
border-color:#990000;
background:#FFFFCC;
}
span.lead{
font-weight:bold;
}
最后是javascript代码,如下:
window.onload=initCSS;
function activeCSS(title){
    var i,oneLink;
         for(i=0;(oneLink=document.getElementsByTagName("link")[i]);i++)
         {
        if(oneLink.getAttribute("title")&&findWord("stylesheet",oneLink.getAttribute("rel")))
            {

                oneLink.disabled=true;/*激活样式*/
             }
             if(oneLink.getAttribute("title")==title)
             {
                 oneLink.disabled=false;
             }
         }
         setCookie("mystyle",title,365);
    }
function findWord(needle,haystack)
{

    return haystack.match(needle+"\\b");
}
function setCookie(name,value,days)
{
    if(days)/*当过期时间不为空或者Null时候*/
    {
        
        var date=new Date();/*启用基本存储器并取得日期和时间。*/

        date.setTime(date.getTime()+(days*24*60*60*1000))
        var expires=";expires="+date.toGMTString();
   }
   else
   {
     expires="";
   }
   document.cookie=name+"="+value+expires+";";/*mystyle=样式名称;expires=时间毫秒*/
}

function initCSS()
{
    var style=readCookie("mystyle");
    if(style){
        activeCSS(style);
        }
}
function readCookie(name)
{
    var needle=name+"=";
    var cookieArray=document.cookie.split(';');
    for(var i=0;i<cookieArray.length;i++)
    {
        var pair=cookieArray[i];

         while(pair.charAt(0)==' ')/*当pair的第一个字符等于空的时候进入*/
        {

            pair=pair.substring(1,pair.length);
        }
     
        if(pair.indexOf(needle)==0)
        {
   
            return pair.substring(needle.length,pair.length);
        }
    }
    return null;
}