網站換膚，之前感覺總是很神奇啊，今天就來總結一下。我寫的就是兩種思路。 首先都需要建一個css文件夾，裡面存放不同顏色的css文件：blue.css； red.css； yellow.css； green.css 在這幾個文件中分別寫好要改變的樣式。 接下來就是html文件，首先第一種思路：只寫一個 ...
網站換膚，之前感覺總是很神奇啊，今天就來總結一下。我寫的就是兩種思路。
首先都需要建一個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，一個是顏色，一個是數字。
如有錯誤，請您指正！
