网站换肤

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

首先都需要建一个css文件夹，里面存放不同颜色的css文件：blue.css； red.css； yellow.css； green.css 在这几个文件中分别写好要改变的样式。

接下来就是html文件，首先第一种思路：只写一个link标签（不推荐，原因请继续阅读）。代码如下：

输出全部大写，所以在下面的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); } }

第一种思路是只写一个link，然后不断添加样式表到head，但是会造成页面样式表越来越多，所以不推荐。

第二种思路：写4个link标签，然后通过调节link的可用与否来实现网站换肤。代码如下：

注意两种方法的html部分section的自定义属性data-color，一个是颜色，一个是数字。