首页 > 代码库 > JS学习之动态加载script和style样式
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=http://www.mamicode.com/null "//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="http://www.mamicode.com/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样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。