你的位置:首页 > 网页设计

[网页设计]网站换肤

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

首先都需要建一个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,一个是颜色,一个是数字。

如有错误,请您指正!