你的位置:首页 > Java教程

[Java教程]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);  }

 

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