DOM中的动态脚本和动态样式

刚刚学习js中DOM的相关操作,其中动态脚本和样式感觉相当的重要.

动态操作是给html添加脚本和样式,有的人可能问,给HTML添加样式,和样式,无论是内联和超链接的方式都可以,但这里重要的是动态的方式添加.例如,如果用户点击某个按键,背景颜色就发生改变,这个简单的添加样式就实现不了了,这里当然运用的事DOM相关的操作.

例如,动态的添加一个js脚本:

var script=document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert(\"hellow world\")";
document.body.appendChild(script);

这个就相当于在body中写入了一段js代码,效果和我们直接在body中写入是一样的,但我们可以随时的调用他,这个就是动态的效果.

我们还可以把他封装起来,可以更好的使用.效果和上面的相同.

function loadScript(content){
var script=document.createElement("script");
script.type="text/javascript";
script.innerHTML=content;
document.body.appendChild(script);
}
loadScript("alert(\"hellow world\")");

我们也可以动态添加一段CSS代码(IE无效):

function loadCss(content){
var style=document.createElement("style");
style.rel="stylesheet";
style.type="text/css";
style.innerHTML=content;
var head=document.getElementsByTagName("head")[0];
head.appendChild(style);
}
loadCss("body{background-color:silver}");

运用同样的技巧也可以动态创建各种元素,例如一个<a>标签:

function createA(url,content){
var script=document.createElement("a");
script.href=url;
script.innerHTML=content;
document.body.appendChild(script);
}
createA("sss","i love you");