javascript动态加载css

ＪＳ动态加载ＣＳＳ在可换主题的界面中具有很重要的意义，用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式，动态加载ＣＳＳ的方法主要有三种，下面详细说明

如果你有很多关联的CSS文件要一起加载，或者想动态的加载不同的CSS文件，那么下面的方法你一定对你有帮助。
第一种：一般用在外部CSS文件中加载必须的文件
@import url(style.css);

/*只能用在CSS文件中或者style标签中*/


第二种：简单的在页面中加载一个外部CSS文件
document.createStyleSheet(cssFile);  


第三种：用createElement方法创建CSS的Link标签
var head = document.getElementsByTagName('HEAD').item(0);

var style = document.createElement('link');

style.href = 'style.css';

style.rel = 'stylesheet'

style.type = 'text/css';

head.appendChild(style);

第三种方法又可以转化为由用户自己控制的ＣＳＳ加载的类型，用户可以选择自己喜欢的颜色，布局等，下面是动态加载替换ＣＳＳ的实现

<script type="text/javascript">
      function changeCss(cssName) {
        /*对于已经存在ＣＳＳ节点的情况下，不重新加载新的节点了，否则要新建节点呵*/
            if (document.getElementsByTagName("link").length > 0) {
                var ctrlLink = document.getElementsByTagName("link")[0];
                ctrlLink.setAttribute("href", cssName + ".css");
            } else {
                var head = document.getElementsByTagName('HEAD').item(0);
                var style = document.createElement('link');
                style.href = cssName + '.css';
                style.rel = 'stylesheet'
                style.type = 'text/css';
                head.appendChild(style);
            }
        }
    </script>
    <a href="#" onclick="changeBg('green')">绿色</a>
    <a href="#" onclick="changeBg('red')"> 红色</a>