你的位置:首页 > Java教程

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