网站换肤 -css教程-PHP中文网

网站换肤

高洛峰

发布： 2016-10-11 13:09:16

原创

1671人浏览过

网站换肤，之前感觉总是很神奇啊，今天就来总结一下。我写的就是两种思路。

首先都需要建一个css文件夹，里面存放不同颜色的css文件：blue.css； red.css； yellow.css； green.css 在这几个文件中分别写好要改变的样式。

接下来就是html文件，首先第一种思路：只写一个link标签（不推荐，原因请继续阅读）。代码如下：

<!--index.html-->
<head> 
<meta charset="UTF-8">
<title>动态换肤</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<style>
*{ margin: 0; padding: 0; }
div{
    height: 50px; 
    background-color: black; 
    padding-left: 10px;
}
div section{
    width: 30px; 
    height: 30px; 
    margin: 10px; 
    display: inline-block; 
}
div section:nth-of-type(1){
    background-color: red; 
}
div section:nth-of-type(2){
    background-color: blue; 
}
div section:nth-of-type(3){
    background-color: green; 
}
div section:nth-child(4){
    background-color: yellow; 
}
</style>
</head>
<body>
<div>
<section data-color="red"></section>
<section data-color="blue"></section>
<section data-color="green"></section>
<section data-color="yellow"></section>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
//添加鼠标单击事件
div.onclick = function(event){
console.log(event.target);
var ele = event.target;
console.log(ele.tagName);//使用.tagName时，控制台输出全部大写，所以在下面的if判断中，使用“SECTION”.
if(ele.tagName == 'SECTION'){
var color = ele.dataset.color;
//var color = ele.getAttribute("data-color");
var link = document.createElement("link");
link.href = 'css/' + color + ".css";
link.rel = "stylesheet";
// 添加样式表到head，但是会造成页面样式表越来越多，所以不推荐
document.head.appendChild(link); 
}
}
</script>
</body>

登录后复制

第一种思路是只写一个link，然后不断添加样式表到head，但是会造成页面样式表越来越多，所以不推荐。

网易天音

网易出品！一站式音乐创作工具！零基础写歌！

查看详情

第二种思路：写4个link标签，然后通过调节link的可用与否来实现网站换肤。代码如下：

<head>
<meta charset="UTF-8">
<title>动态换肤</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<link rel="stylesheet" type="text/css" href="css/red.css">
<link rel="stylesheet" type="text/css" href="css/green.css">
<link rel="stylesheet" type="text/css" href="css/yellow.css">
<style>
*{ margin: 0; padding: 0; }
div{ 
    height: 50px; 
    background-color: black;
    padding-left: 10px; 
}
div section{ 
    width: 30px; 
    height: 30px; 
    margin: 10px; 
    display: inline-block; 
}
div section:nth-of-type(1){ 
    background-color: blue; 
}
div section:nth-of-type(2){ 
    background-color: red; 
}
div section:nth-of-type(3){ 
    background-color: green; 
}
div section:nth-child(4){ 
    background-color: yellow; 
}
</style>
</head>
<body>
<div>
<section data-color="0"></section>
<section data-color="1"></section>
<section data-color="2"></section>
<section data-color="3"></section>
</div>
<script>
var links = document.getElementsByTagName('link');
function enableLinks(index){
for(var i = 0;i < links.length; i++){//循环查找4个link标签
//disabled表示关闭，如果i不等于当前index，则disabled就是true，即关闭该link标签
//.sheet表示样式表
links[i].sheet.disabled = i!=index;
}
}
enableLinks(2);
//给div标签添加鼠标点击事件
//event:事件对象
document.querySelector('div').onclick = function(event){
var index = event.target.dataset.color;
console.log(index);
if(index == undefined){
return;
}else{
//调用enableLinks()
enableLinks(index);
}
}
</script>
</body>

登录后复制

注意两种方法的html部分section的自定义属性data-color，一个是颜色，一个是数字。