• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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文档基本结构(制作网页基础知识)
    下一篇：dom操作表格示例(dom创建表格)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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