网页换肤

（1）功能描述：

　　点击对应的换肤按钮，实现改变页面整个肤色的功能。（可以配合cookie使用以达到更好效果，这个例子只是简单的实现切换皮肤）

（2）实现代码：

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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link id="changeSkin" rel="stylesheet" href="red.css" />
<!-- 这里的CSS样式为公共样式 -->
<style>
    *{margin: 0px;padding: 0px;}
    body{font-size: 12px;}
    li{list-style: none;}
    #box{width: 500px;margin: 50px auto;}
    #box #skin{overflow: hidden;}
    #box #skin li{float: left;width: 6px;height: 6px;border: 4px solid;margin-right: 10px;}
    #box #skin li.active{background-color: white!important;}
    #box #skin #red{background-color: red;border-color: red;}
    #box #skin #green{background-color: green;border-color: green;}
    #box #skin #black{background-color: black;border-color: black;}
    #box #nav{overflow: hidden;margin-top: 10px;}
    #box #nav li{float: left;padding: 5px 25px;border: 1px solid;border-right: none;height: 20px;line-height: 20px;}
</style>
</head>
<body>
    <div id="box">
        <ul id="skin">
            <li id="red" class="active"></li>
            <li id="green"></li>
            <li id="black"></li>
        </ul>
        <ul id="nav">
            <li>新闻</li>
            <li>娱乐</li>
            <li>体育</li>
            <li>电影</li>
            <li>音乐</li>
            <li style="border-right:1px solid;">旅游</li>
        </ul>
    </div>
</body>
</html>

CSS：（分别保存为单独的.css文件）

red.css

body{background-color: #ffdddd;color: #fff;}
#box #nav li{background-color: red;}

green.css

body{background-color: #a3c5a8;color: #fff;}
#box #nav li{background-color: green;}

black.css

body{background-color: #ccc;color: #fff;}
#box #nav li{background-color: #000;}

js:

<script>
    window.onload=function(){
        var oSkin = document.getElementById("skin");
        var aBtn = document.getElementsByTagName("li");
        var chaS = document.getElementById("changeSkin");

        for(var i=0;i<aBtn.length;i++){
            aBtn[i].onclick=function(){
                for(var j=0;j<aBtn.length;j++){
                    aBtn[j].className="";
                }
                this.className="active";
                chaS.href=this.id+".css";
            }
        }
    }
</script>

(3)效果图如下所示：

(4)实现原理：

通过点击换肤按钮，获取相应的ID值，从而改变 link 标签的 href 属性达到切换皮肤的功能。

posted @ 2013-11-14 10:49  白小虫  阅读(404)  评论(0)  编辑  收藏  举报