zoukankan      html  css  js  c++  java
  • JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点"。我们都知道一个基本的网页格式是
    <!DOCTYPE />
    <head></head>
    <body><body />
    这些是最基本的形态,但是其实它省略了最外面的一个标签<document>.
    <document>
    <!DOCTYPE />
    <head></head>
    <body><body />
    </document>
    这其实才是它的本来面目(默认吧document标签给省略了)。是不是感觉有什么不一样的呢?这下子就好理解的多了。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得,因为它是根。在看一下你所写的网页文档,记住任何存在<document>标签里面都是可以获得的,记得么 在节点类型中有document这种类型,所有的节点其实都是已经被分类好的,知识它们的nodeType和nodeName不一样而已(可以查一下资料"节点类型")。有点跑题,现在来看一下具体的代码(省略版的)如下:
    //动态加载脚本
     
    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);
     
    }    
    

      

  • 相关阅读:
    Delphi Code Editor 之 几个特性(转)
    Delphi Live Bindings 初探
    PC端和移动APP端CSS样式初始化
    移动端H5页面高清多屏适配方案
    js中的事件委托详解
    浏览器页面加载解析渲染机制
    CSS选择器渲染效率
    JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码
    关于苹果真机 getFullYear()返回值为NAN的问题
    js事件监听器用法实例详解
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/6215723.html
Copyright © 2011-2022 走看看