zoukankan      html  css  js  c++  java
  • JS动态加载JS文件与CSS文件

    原理解析:

    第一步:使用dom创建<script type="text/javascript"> 或者 <link>标签,并给他们附加属性,如type等

    第二步:使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>.

    应用:

    1、提高代码的复用,减 少代码量;

    2、添加一个javascript控制器和 session可以实现动态改变页面样式;

    3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性

    DEMO 一 HTML页面  jsforjscss.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="loadjscssfile.js"></script>
    <title>无标题文档</title>
    </head>
    <body>
    </body>
    </html>

     二 动态加载js文件的程序   loadjscssfile.js

    // JavaScript Document
    function loadjscssfile(filename, filetype) {
    if (filetype == "js") {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    } else if (filetype == "css") {
    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);
    }
    }
    loadjscssfile("do.js", "js");
    loadjscssfile("test.css", "css");

     三 被加载的 js文件:

    do.alert("this is do");

    四 被加载的 css文件:test.css (css文件中还可以用@import url("menu.css"); 引进其他css文件)

    @charset "utf-8";
    @import url("menu.css");
    @import url("../gundong.css");
    body{
        background-color:gray;
    }
  • 相关阅读:
    JavaScript内置函数
    JavaScript内置函数
    javascript入门之算术乘法表
    第三章 3 python运算符的优先级
    第三章 2 pyhon中的运算符
    第三章 1 input输入函数
    第二章 5 python中的注释
    第二章 4 数据类型的转换
    第二章 3 数据类型
    第二章 2 python中的标识符和保留字
  • 原文地址:https://www.cnblogs.com/asqq/p/3194981.html
Copyright © 2011-2022 走看看