Home > Article > Web Front-end > website skin resurfacing
网站换肤,之前感觉总是很神奇啊,今天就来总结一下。我写的就是两种思路。
首先都需要建一个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,一个是颜色,一个是数字。