刚刚学习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");