search

Home >Web Front-end >CSS Tutorial >website skin resurfacing

website skin resurfacing

高洛峰
高洛峰Original
2016-10-11 13:09:161479browse

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

首先都需要建一个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 == &#39;SECTION&#39;){
var color = ele.dataset.color;
//var color = ele.getAttribute("data-color");
var link = document.createElement("link");
link.href = &#39;css/&#39; + 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(&#39;link&#39;);
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(&#39;div&#39;).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，一个是颜色，一个是数字。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS makes div background transparentNext article：CSS makes div background transparent

Related articles

See more