JS实现css主题样式切换：动态改变引入的css文件

CSDN链接

一个页面要显示不同的主题风格，就需要写不同的css文件； 

在做不同css文件相互切换时，首先要了解link标签中的rel属性； 

rel属性值：

alternate文档的替代版本（比如打印页、翻译或镜像）。

stylesheet 文档的外部样式表。

start 集合中的第一个文档。

next 集合中的下一个文档。

prev 集合中的上一个文档。

contents 文档的目录。

index 文档的索引。

glossary 在文档中使用的词汇的术语表（解释）。

copyright 包含版权信息的文档。

chapter 文档的章。

section 文档的节。

subsection 文档的小节。

appendix 文档的附录。

help 帮助文档。

bookmark 相关文档。

一般我们在页面中引入样式使用的属性是stylesheet；如： 

< link rel=’stylesheet’ type=’text/css’ href=’a.cc’> 

这里我们要用到alternate属性，用来替换css文件： 

html:

```

   

       

           

           

       

   

```

其中第一个link标签中的rel属性值为stylesheet，就是当前页面所加载显示的css样式文件； 

第二个alternate stylesheet就是用来做替换用的，写在head中时不会被显示出来，但是会重服务器中加载到浏览器中； 

这时候就需要写一个javascript方法来做触发，替换；

```

// 对切换主题的按钮绑定事件，用来做触发document.getElementById("sheet-a").addEventListener("click",function(){ setStyleSheet("a");

});

document.getElementById("sheet-b").addEventListener("click",function(){    setStyleSheet("b");

});/** * 查找所有的link标签，找到符合条件的css进行切换 * @title:需要切换的css文件名称，也可以是某值，主要是能够找到所要切换的link标签 **/functionsetStyleSheet(title){ 

    // 首先找到DOM中所有的link标签    var link_list = document.getElementsByTagName("link");

    if ( link_list ){

        for ( var i=0;i

            // 要找到所有link中rel属性值包括style的，也就是包括stylesheet和alternate stylesheet;            if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){

                // 将符合条件的link的disabled的属性设为true，都改为禁用；                link_list[i].disabled = true;

                // 然后判断link标签中的title属性，找到我们需要替换的css文件                // 找到后将该link的disabled改为启用；                if ( link_list[i].getAttribute("title") === title){

                    link_list[i].disabled = false;

                }

            }

        }

    }

};

```