第一种方式：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>动态皮肤-1</title>
8. <link rel="stylesheet" type="" href="red.css">
9. <style>
10. body{
11. margin: 0;
12. }
13. nav{
14. padding: 10px;
15. background-color: #222;
16. }
17. span{
18. width: 20px;
19. height: 20px;
20. display: inline-block;
21. }
22. span:nth-child(1){
23. background-color: red;
24. }
25. span:nth-child(2){
26. background-color: blue;
27. }
28. span:nth-child(3){
29. background-color: green;
30. }
31. span:nth-child(4){
32. background-color: yellow;
33. }
34. </style>
35. </head>
36. <body>
37. <nav>
38. <span data-color = "red"></span>
39. <span data-color = "blue"></span>
40. <span data-color = "green"></span>
41. <span data-color = "yellow"></span>
42. </nav>
43. <script>
44. var nav =document.querySelector('nav')
45. nav.onclick =function(event){
46. // event 包含触发事件的标签元素及与事件相关的一些数据
47. var ele = event.target
48. // 触发事件的标签元素
49. if(ele.tagName == 'SPAN'){
50. var color = ele.dataset.color
51. var link =document.createElement('link')
52. link.rel = 'stylesheet'
53. link.href = color + '.css'
54. document.head.appendChild(link)
55. // 会导致head里面的link越来越多 页面上的样式越来越多
56. }
57. }
58. </script>
59. </body>
60. </html>
第二种：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>动态皮肤-2</title>
8. <link rel="stylesheet" type="" href="red.css">
9. <link rel="stylesheet" type="" href="blue.css">
10. <link rel="stylesheet" type="" href="green.css">
11. <link rel="stylesheet" type="" href="yellow.css">
12. <style>
13. body{
14. margin: 0;
15. }
16. nav{
17. padding: 10px;
18. background-color: #222;
19. }
20. span{
21. width: 20px;
22. height: 20px;
23. display: inline-block;
24. }
25. span:nth-child(1){
26. background-color: red;
27. }
28. span:nth-child(2){
29. background-color: blue;
30. }
31. span:nth-child(3){
32. background-color: green;
33. }
34. span:nth-child(4){
35. background-color: yellow;
36. }
37. </style>
38. </head>
39. <body>
40. <nav>
41. <span data-color = "0"></span>
42. <span data-color = "1"></span>
43. <span data-color = "2"></span>
44. <span data-color = "3"></span>
45. </nav>
46. <script>
47. var links =document.querySelectorAll('link[rel=stylesheet]')
48. function enableLinks(index){
49. for(var i = 0;i < links.length;i++){
50. links[i].sheet.disabled = i != index
51. // disabled 检查是否可编辑 true不可编辑 false可编辑
52. // link[i].sheet 样式表
53. // disabled 是否已应用当前样式表
54. // 先执行 i != index 如果为 true 表示关闭样式表 如果为false则打开样式表
55. }
56. }
57. document.querySelector('nav').onclick =function(event){
58. var index = event.target.dataset.color
59. if(index){
60. enableLinks(index)
61. }
62.
63. }
64. </script>
65. </body>
66. </html>
演示效果：
第一种、第二种