动态加载CSS样式表的注意事项

我们知道，在html有两种方式加载样式表。

<link rel="stylesheet" type="text/css" href="style.css">

<style>body { background-color: red; }</style>

其中第一种一般用来做外联css文件使用。第二种一般作为内联css使用。

在实际的工作中我们常常会遇到需要动态变化这些属性的时候。

针对上述两种方式，我们写JS代码以达到目的：

 

针对link方式：

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

如果是已经存在的link，假设ID为mylink

1 var link =  document.getElementById("mylink");
2 link.href="your css file path"

上述代码可以保证主流浏览器运行正常。我做了一些简单的测试，link放在任何文档的地方都可以生效，当然你如果放在body里要修改相应代码。不过不建议这样使用，老老实实放在head里面最保险。

 

针对style方式：

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML="body{background-color:red;}";
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

 

如果是已经存在的style，假设ID为mystyle

1 var style = document.getElementById("mystyle");
style.innerHTML= "body{background-color:red;}";

上述代码在除IE外的主流浏览器都没有问题。但IE对style有特殊处理。在设置时候会抛出“意外地调用了方法或属性访问”。

 

如何解决呢？

 

IE允许写入style标签的styleSheet.cssText属性，那么我们使用try-catch接收这个意外，对于异常的，我们访问styleSheet.cssText进行设置。

 

try {
    style.innerHTML = "body{background-color:red}";
} 
catch (e) {
    style.styleSheet.cssText = "body{background-color:red}";
}