JS学习之动态加载script和style样式

Posted Henu丶雨巷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
 
}    

  

以上是关于JS学习之动态加载script和style样式的主要内容,如果未能解决你的问题,请参考以下文章

LABjs学习之无阻塞动态并行加载脚本文件以及管理执行顺序

wordpress主题制作:引入外部CSS样式文件和JS脚本文件-要不要注册样式表(未完待续)

jQuery学习之------元素样式的操作

flask学习之配置文件的加载和动态url的使用

JavaScript 文件中的代码如何获取文件的 URL?

45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解