javascript动态加载css文件

标签: javascript加载css文件   时间:2017-11-05
在网站前端开发中,我们有时候需要动态加载css文件,这个该如何实现呢?本文章向大家介绍如何使用js技术为页面动态添加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 link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

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

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

 

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

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    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。

原文地址:http://www.manongjc.com/article/2215.html