动态加载CSS

    昨天项目中遇到一个动态加载CSS兼容的问题。

    

原来变化样式都是使用的方法是对document.styleSheets的disabled属性的赋值（true/false）

代码如下：

document.styleSheets[i].disabled = false;
//i表示当前样式（即将失效）在样式数组中的坐标
document.styleSheets[j].disabled = true;
//j表示即将生效样式在样式数组中的坐标

但是这段代码在safari浏览器中是没有效果的。你在这两个样式中不停切换，会将你的外部引用样式给删除掉。到这里，我为难了，网上查了一下，没有找到我需要的方法，于是自己琢磨了几个小时，发现这个方法可以解决这个问题：我先对浏览器做判断，不是safari就用原来的方法，是safari就使用下面的策略。

    1.通过navigator对象拿到appName属性，获取浏览器类别。

    2.将即将生效的外部样式引用到页面中。

具体做法如下：

    var link=document.createElement("link");
    link.rel="stylesheet";
    link.type="text/css";
    link.href=GLOBAL.domain+"/assets/css/style_"+count+".css";
    document.getElementsByTagName("body").item(0).appendChild(link);

其实就是给他增加外部样式。

记下这篇文章，仅留下记忆和帮助那些需要的人。

在此期间，参考了两篇比较有价值的文章

1. js获取客户端浏览器信息
   

2. 动态加载CSS

惯例：有想法或者有更好的idea的无论菜鸟还是大神请留言。谢谢