DOM操作之动态脚本与动态样式插入

该文章由 leevare 发布于 ,归类于 Javascript

分别可以使用两种方式来引入,一种是通过引入外部文件的方式,如js文件的引入。

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

css的引入和这个类似,不再赘述。

第二种是使用内联的方式来插入内容。

在使用这种方式时,需要注意一下兼容性问题。如果按照上面代码的逻辑,应该是如下这个样子。

var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode(code));
document.body.appendChild(script);

不过很不巧的是在IE浏览器中,会导致错误,因为IE将<script>标签视为一个特殊元素,不允许DOM访问其子节点。解决办法是使用<script>text属性来指定JavaScript代码。

script.text = code;

所以,兼容的写法如下

function loadScript(code) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try {
        script.appendChild(document.createTextNode(code));
    }catch (e) {
        script.text = code;
    }
    document.body.appendChild(script);
}

这样,当appendChild方法执行出现错误时,就说明是IE浏览器,于是就必须使用text属性了。

同样,在IE浏览器中,其将<style>也视为一个特殊的与<script>类似的节点,不允许访问其子节点,所以,css的内联方式也不可以使用appendChild这样的方法来添加内容。解决办法是访问元素的styleSheet属性,该属性又有一个cssText属性,可以接受css代码。

css.styleSheet.cssText = cssCode;

那么,css代码插入的兼容性写法如下。

function loadStyle(css) {
    var style = document.createElement('style');
    style.type = 'text/css';
    try {
        style.appendChild(document.createTextNode(css));
    }catch (e) {
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒