小练习涨姿势（二）

今天来个简单的网页换肤效果 参考来自：http://js.fgm.cc/learn/lesson1/02.html

其实实现原理也很简单，就是改变页面的外链样式表

所以呢，需要准备几个样式表：如下

green.css文件

body{
background:#A3C5A8;
}

#navlist li{
background:green;
}

red.css文件

body{
    background:#FDD;
}

#navlist li{
    background:red;
}

black.css文件

body{
    background:#ccc;
}

#navlist li{
    background:black;
}

HTML文件：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>网页换肤</title>
<style>
body,div,ul,ul li{margin:0;padding:0;}
body{width:100%;height: 100%;}
li{list-style:none;}
#outer{width:800px;margin:0 auto;padding:20px;text-align: center;}
#skinbtn{width:100%;clear:both;height:20px;}
#skinbtn li.current{background:#fff !important;}
#skinbtn li{width:6px;height:6px;float:left;cursor:pointer;margin-left:5px;font-size:0;}
#red{border:3px solid red;background:red;}
#green{border:3px solid green;background:green;}
#black{border:3px solid black;background:black;}

#navlist li{float:left;width:60px;height:30px;margin-left:2px;line-height: 30px;color:#fff;}
</style>
<link rel="stylesheet" type="text/css" href="green.css" />
<script>
window.onload=function(){
    var oLink=document.getElementsByTagName('link')[0];
    var aSkinBtn=document.getElementById('skinbtn').getElementsByTagName('li');
    
    for(var i=0;i<aSkinBtn.length;i++){
        aSkinBtn[i].onclick=function(){
            for(var p in aSkinBtn){aSkinBtn[p].className='';}
            this.className='current';
            oLink['href']=this.id+'.css';
        }    
    }
}
</script>
</head>
<body>
<div id="outer">
<ul id="skinbtn">
    <li id="red"></li>
    <li id="green" class="current"></li>
    <li id="black"></li>
</ul>
<ul id="navlist">
    <li>新闻</li>
    <li>娱乐</li>
    <li>体育</li>
    <li>电影</li>
    <li>音乐</li>
    <li>旅游</li>
</ul>
</div>
</body>
</html>

代码很简单，但是在这里面我找到了自己的遗漏之处

那就是this.id的用法，我测试了一下兼容性，IE6+均支持，其他当然也支持

它的作用就是获取当前对象的id名称。是不是感觉和className很像。

 

posted @ 2013-11-12 16:34  Gresic  阅读(148)  评论(0)    收藏  举报