javascript动态加载css文件

js能不能将css文件动态添加到页面呢？答案是肯定的，下面小编向大家介绍一下实现的方法及源码。

下面实例检查css文件是否加载，如果没有加载，执行js代码，如果以及加载了，不再重复添加css文件：

var cssId = \'myCss\';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName(\'head\')[0];
    var    = document.createElement(\' \');
     .id   = cssId;
     .rel  = \'stylesheet\';
     .type = \'text/css\';
     .href = \'http://website.com/css/stylesheet.css\';
     .media = \'all\';
    head.appendChild( );
}

或者我们直接使用jquery来实现更简单：

$(\'head\').append(\'<  rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\');

下面js函数用于动态加载js文件或css文件：

function loadjscssfile(filename, filetype) {
  if (filetype == \"js\") { //if filename is a external   file
    // alert(\'called\');
    var fileref = document.createElement(\' \')
    fileref.setAttribute(\"type\", \"text/ \")
    fileref.setAttribute(\"src\", filename)
    alert(\'called\');
  } else if (filetype == \"css\") { //if filename is an external CSS file
    var fileref = document.createElement(\" \")
    fileref.setAttribute(\"rel\", \"stylesheet\")
    fileref.setAttribute(\"type\", \"text/css\")
    fileref.setAttribute(\"href\", filename)
  }
  if (typeof fileref != \"undefined\")
    document.getElementsByTagName(\"head\")[0].appendChild(fileref)
}

第一个参数表示文件名称，第二个参数是文件类型，这里的值为js或css。