html动态加载css样式和js脚本示例

湛蓝之海

一、动态加载脚本
当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
比如：我们想在需要检测浏览器的时候，再引入检测文件。

代码如下:

<script type="text/javascript">
  window.onload = function(){
    alert(typeof BrowserDetect);
  }
  var flag = true; //设置 true 再加载
    if (flag) {
      loadScript('browserdetect.js'); //设置加载的 js
    }
  function loadScript(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    //document.head.appendChild(script); //document.head 表示<head>
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>动态执行 js</p>
<p>
<script type="text/javascript">
  window.onload = function(){
    
  }
  var flag = true; //设置 true 再加载
  if (flag) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    var text = document.createTextNode("alert('Lee')"); //IE6,7,8 浏览器报错
    script.appendChild(text);
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>IE 6,7,8浏览器认为 script 是特殊元素，不能在访问子节点。为了兼容，可以使用 text属性来代替。</p>
<p>
<script type="text/javascript">
  window.onload = function(){
    
  }
  var flag = true; //设置 true 再加载
  if (flag) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = "alert('Lee')";
    script.appendChild(text);
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>需要做所有浏览器兼容

二、动态加载样式
为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。
动态执行 link

代码如下:

var flag = true;
  if (flag) {
    loadStyles('basic.css');
  }
  function loadStyles(url) {
    var link = document.createElement('link');link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
  }

动态执行 style

代码如下:

<script type="text/javascript">
  var flag = true;
  if (flag) {
    var style = document.createElement('style');
    style.type = 'text/css';
    //var box= document.createTextNode('#box{background:red}');// IE6,7,8 不支持
    //style.appendChild(box);
    document.getElementsByTagName('head')[0].appendChild(style);
    insertRule(document.styleSheets[0], '#box', 'background:red', 0);
  }
  function insertRule(sheet, selectorText, cssText, position) {
    //如果是非 IE6,7,8
    if (sheet.insertRule) {
      sheet.insertRule(selectorText + "{" + cssText + "}", position);
      //如果是 IE6,7,8
    } else if (sheet.addRule) {
      sheet.addRule(selectorText, cssText, position);
    }
  }
</script>

[Html/CSS] html动态加载css样式和js脚本示例

相关帖子

好看的CSS剪裁GIF背景图片动画特效

CSS3荧光灯文字闪烁动画特效

基于python的动态时钟，带十二时辰和经络养身

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

阿里云盘自动签到脚本

湛蓝之海 LV3