网站换肤
程序员文章站
2022-05-13 15:30:34
...
网站换肤,之前感觉总是很神奇啊,今天就来总结一下。我写的就是两种思路。
首先都需要建一个css文件夹,里面存放不同颜色的css文件:blue.css; red.css; yellow.css; green.css 在这几个文件中分别写好要改变的样式。
接下来就是html文件,首先第一种思路:只写一个link标签(不推荐,原因请继续阅读)。代码如下:
1 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,一个是颜色,一个是数字。
如有错误,请您指正!