不久前做一个页面切换皮肤的脚本,遇到一个非常棘手的问题.有这样三个样式文件 blue.css,black.css,default.css,而blue.css和black.css两个文件中的首行均有一行import url(default.css)的导入语句,默认样式为black.css,使用
<link rel=stylesheet type=text/css src="black.css" />
引入到页面中,一开始比较简单的写上切换的代码
document.styleSheets[0].href = "blue.css";
这样做的ie6下正常,在ie7/8beta1中会导致default.css定义的样式丢失而只成功的应用了blue.css定义的样式,在firefox中则根本不能执行.于是,参考了一些兼容性的办法后修改一下,为link标签加上一个id命名为lkStyle,即
<link id="lkStyle" rel="stylesheet" type="text/css" href="black.css" />
修改的脚本如下
var objStyle = document.getElementById("lkStyle");
objStyle.href ="";
objStyle.href = "blue.css";
就这三句代码就能够在firefox/ie6/ie7/ie8beta下兼容运行,并且切换的时候不再丢失import导入的样式了.