DOM动态脚本和动态样式

动态脚本

【定义】

　　在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。

【方式】

　　【1】插入外部文件方式

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js.js";
document.body.appendChild(script);

　　使用函数封装如下:

function loadScript(url){
    script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
loadScript("js.js");

　　【2】直接插入JavaScript代码

　　　　IE8-浏览器下使用appendChild或innerHTML都会报错，因为IE8-浏览器将<script>视为一个特殊的元素，不允许DOM访问其子节点。

var script = document.createElement("script");
script.type = "text/javascript";
//script.innerHTML = "alert('hi');";
//script.appendChild(document.createTextNode("alert('hi');"));
document.body.appendChild(script);

　　　　【解决】使用<script>元素的text属性来指定Javascript代码

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "alert('hi');";
document.body.appendChild(script);

　　　　【完美解决】safari3-浏览器不能正确支持text属性，但却允许使用文本节点，封装兼容函数如下

function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
        script.appendChild(document.createTextNode(code));
    }catch(ex){
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString("alert('hi!')");

动态样式

【定义】

　　在页面刚加载时不存在，加载完成后动态添加到页面中的样式。

【方式】

　　【1】插入外部文件方式

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);

　　使用函数封装如下：

function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link);
}
loadStyles("style.css");

　　【2】直接插入css嵌入样式

var style = document.createElement("style");
style.type = "text/css";
//style.innerHTML = "body{background-color: red;}";
//style.appendChild(document.createTextNode("body{background-color: red;}"));
var head = document.getElementsByTagName('head')[0];
head.appendChild(style); 

　　　　如<script>标签类似，IE8-浏览器将<style>标签当作特殊的节点，不允许访问其子节点。IE10-浏览器支持使用styleSheet.cssText属性来设置样式。兼容写法如下:

function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    }catch(ex){
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadStyleString("body{background-color: red;}");