网站换肤

2018-06-24 00:28:16来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

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

 1 <!--index.html-->
 2 <head> 
 3 <meta charset="UTF-8">
 4 <title>动态换肤</title>
 5 <link rel="stylesheet" type="text/css" href="css/blue.css">
 6 <style>
 7 *{ margin: 0; padding: 0; }
 8 div{
 9     height: 50px; 
10     background-color: black; 
11     padding-left: 10px;
12 }
13 div section{
14     width: 30px; 
15     height: 30px; 
16     margin: 10px; 
17     display: inline-block; 
18 }
19 div section:nth-of-type(1){
20     background-color: red; 
21 }
22 div section:nth-of-type(2){
23     background-color: blue; 
24 }
25 div section:nth-of-type(3){
26     background-color: green; 
27 }
28 div section:nth-child(4){
29     background-color: yellow; 
30 }
31 </style>
32 </head>
33 <body>
34 <div>
35 <section data-color="red"></section>
36 <section data-color="blue"></section>
37 <section data-color="green"></section>
38 <section data-color="yellow"></section>
39 </div>
40 <script>
41 var div = document.getElementsByTagName("div")[0];
42 //添加鼠标单击事件
43 div.onclick = function(event){
44 console.log(event.target);
45 var ele = event.target;
46 console.log(ele.tagName);//使用.tagName时,控制台输出全部大写,所以在下面的if判断中,使用“SECTION”.
47 if(ele.tagName == 'SECTION'){
48 var color = ele.dataset.color;
49 //var color = ele.getAttribute("data-color");
50 var link = document.createElement("link");
51 link.href = 'css/' + color + ".css";
52 link.rel = "stylesheet";
53 // 添加样式表到head,但是会造成页面样式表越来越多,所以不推荐
54 document.head.appendChild(link); 
55 }
56 }
57 </script>
58 </body>

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

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

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>动态换肤</title>
 4 <link rel="stylesheet" type="text/css" href="css/blue.css">
 5 <link rel="stylesheet" type="text/css" href="css/red.css">
 6 <link rel="stylesheet" type="text/css" href="css/green.css">
 7 <link rel="stylesheet" type="text/css" href="css/yellow.css">
 8 <style>
 9 *{ margin: 0; padding: 0; }
10 div{ 
11     height: 50px; 
12     background-color: black;
13     padding-left: 10px; 
14 }
15 div section{ 
16     width: 30px; 
17     height: 30px; 
18     margin: 10px; 
19     display: inline-block; 
20 }
21 div section:nth-of-type(1){ 
22     background-color: blue; 
23 }
24 div section:nth-of-type(2){ 
25     background-color: red; 
26 }
27 div section:nth-of-type(3){ 
28     background-color: green; 
29 }
30 div section:nth-child(4){ 
31     background-color: yellow; 
32 }
33 </style>
34 </head>
35 <body>
36 <div>
37 <section data-color="0"></section>
38 <section data-color="1"></section>
39 <section data-color="2"></section>
40 <section data-color="3"></section>
41 </div>
42 <script>
43 var links = document.getElementsByTagName('link');
44 function enableLinks(index){
45 for(var i = 0;i < links.length; i++){//循环查找4个link标签
46 //disabled表示关闭,如果i不等于当前index,则disabled就是true,即关闭该link标签
47 //.sheet表示样式表
48 links[i].sheet.disabled = i!=index;
49 }
50 }
51 enableLinks(2);
52 //给div标签添加鼠标点击事件
53 //event:事件对象
54 document.querySelector('div').onclick = function(event){
55 var index = event.target.dataset.color;
56 console.log(index);
57 if(index == undefined){
58 return;
59 }else{
60 //调用enableLinks()
61 enableLinks(index);
62 }
63 }
64 </script>
65 </body>

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

如有错误,请您指正!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:雪碧图应用

下一篇:《深入理解bootstrap》读书笔记:第三章 CSS布局