使用javascript动态加载外部css或js文件

最新推荐文章于 2023-03-13 18:24:16 发布

sunyujia

最新推荐文章于 2023-03-13 18:24:16 发布

阅读量2.6k

点赞数

分类专栏： Javascript 文章标签： javascript css stylesheet html 网易 null

本文链接：https://blog.csdn.net/sunyujia/article/details/2499920

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

几天没写东西了，这几天真是比较懒惰，今天总算写了点小东西呵呵，很简单的东西，也参考了很多网络资源，动态加载css或js文件的实际应用有很多，不用我介绍了，大家肯定都感受过，比如不刷新页面切换css，一些大的门户网站的js文件也是动态加载的，比如网易等等。其实原理非常简单无法就是dhtml罢了，废话不说了，放代码。

csdn博客又出问题了，不能插入html了，晕，真不好用。大家将就着看吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title></title>
  <script type="text/javascript">
   function loadFile(filePath, type){
    var element=null;
    if (type=="js"){
      element=document.createElement('script')
      element.setAttribute("type","text/javascript")
      element.setAttribute("src", filePath)
    }else if (type=="css"){
      element=document.createElement("link")
      element.setAttribute("rel", "stylesheet")
      element.setAttribute("type", "text/css")
      element.setAttribute("href", filePath)
    }else{
     return ;
    }
    var eHead=document.getElementsByTagName("head");
    if(eHead!=null)
     eHead[0].appendChild(element)
   }
  </script>
</head>
<body>
  <div><a href="javascript:loadFile('default1.css', 'css')">red</a></div>
  <div><a href="javascript:loadFile('default2.css', 'css')">blue</a></div>
  <div><a href="javascript:loadFile('alert.js', 'js')">alert</a></div>
</body>
</html>

default1.css
* {
background: red;
}

default2.css

* {
background: blue;
}

alert.js

alert("abc")

sunyujia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript动态加载外部css或js文件

几天没写东西了，这几天真是比较懒惰，今天总算写了点小东西呵呵，很简单的东西，也参考了很多网络资源，动态加载css或js文件的实际应用有很多，不用我介绍了，大家肯定都感受过，比如不刷新页面切换css，一些大的门户网站的js文件也是动态加载的，比如网易等等。其实原理非常简单无法就是dhtml罢了，废话不说了，放代码。csdn博客又出问题了，不能插入html了，晕，真不好用。大家将就着看吧。
复制链接

扫一扫