欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript---动态加载script和style样式

程序员文章站 2022-07-01 23:17:57
一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档，XML文档都有很特殊的象征:"标签"也叫"节点"。 一个基本的网页格式 这些是最基本的形态，但是其实它省略了最外面的一个标签 这其实才是它的本来面目（默认把document标签给省略了）。document.bo ......

一个网页里面的内容理解为一个xml或者说网页本身也就是一个xml文档，xml文档都有很特殊的象征:"标签"也叫"节点"。

一个基本的网页格式

<!doctype />
<head></head>
<body><body />

这些是最基本的形态，但是其实它省略了最外面的一个标签<document>

<document>
      <!doctype />
      <head></head>
      <body><body/>
</document>

这其实才是它的本来面目（默认把document标签给省略了）。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得，因为它是根。网页文档中任何存在在<document>标签里面都是可以获得的，所有的节点其实都是已经被分类好，但它们的nodetype和nodename不一样而已。

代码写法一：

function loadscript(url, callback) {
    var script = document.createelement("script");
    script.type = "text/javascript";
    if (typeof (callback) != "undefined") {
        if (script.readystate) {
            script.onreadystatechange = function () {
                if (script.readystate == "loaded" || script.readystate == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = function () {
                callback();
            };
        }
    };
    script.src = url;
    document.body.appendchild(script);
}

写法二：

function loadscript(){
  var script=document.createelement("script");
  script.type="text/javascript";
  script.src=null 
try{
 script.appendchild(document.createtextnode("//code"));     //javascript内容是利用createtextnode创建的（不过ie不认这个）
}catch(ex){
script.text="//code";                                                                //ie认为script节点是个特殊的节点所有有个特殊的text属性
}
  document.body.appendchild(script);   /*兼容ie*/
}

 

动态加载样式：

// 动态记载样式
function loadstyle(){
  var style=document.createelement("style"); 
  style.type="text/css";  //参考网页上的style样式，他怎么写你怎么写
  style.href="style.css";
try{
   style .appendchild(document.createtextnode("//style code")); 
}catch(ex){
   style.stylesheet.styletext="//style code";    /*兼容ie*/        //ie也认为style节点是个特殊的节点所有有个特殊的stylesheet.styletext属性 - -
}
 
 var head=document.getelementbytagname("head")[0];        
  head.appchild(link);
}

 

上一篇： 宁平城之战有多重要？对西晋王朝与汉民族有什么影响？

下一篇： lnmp：php安装步骤详情

推荐阅读