DOM操作技术之动态脚本与动态样式（兼容版）

动态脚本

使用<script>元素可以向页面中插入Javascript代码，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码。

而我们要说的动态脚本，指的是在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。跟操作HTML一样，创建动态脚本

也有两种方式：插入外部文件和直接插入Javascript代码

插入外部文件

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

 

直接插入Javascript代码

/*IE将<script>视为一个特殊的元素，不允许DOM访问其子节点，
 *因此会报错；除IE外，其他浏览器均支持appendChild方法；Safari 3.0
 *以前的版本不能正确的支持text，所以最好也使用appendChild方法。
 *总而言之，仅IE try会报错，然后进入catch块，其他浏览器try不报错*/
    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);
    }

 

 

动态样式

能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本

类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。

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);
    }

 

style方式

//引入try catch的原因同直接插入Javascript代码的原因一致
    function loadStylesString(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);
    }

 

结语：如果此文章当你有所帮助，请点击“推荐”，谢谢