Javascript切换皮肤样式个案-优快云博客

本文介绍了一种解决CSS样式切换时出现的兼容性问题的方法。通过修改引用样式文件的方式，确保了在不同浏览器（包括IE6/7/8及Firefox）下能够正确地切换页面样式，并且不会丢失通过import导入的样式。

不久前做一个页面切换皮肤的脚本,遇到一个非常棘手的问题.有这样三个样式文件 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导入的样式了.

转载于:https://www.cnblogs.com/BeanHsiang/archive/2008/07/07/1237247.html