浏览 5956 次
|
锁定老帖子 主题：js添加div
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-28
最后修改：2009-02-28
一. 添加div
不指添加div,添加其他元素都可以通过这种方式 <html>
<script language="javascript">
i=1;
/*添加div*/
function add(){
//创建一个div
var my = document.createElement("div");
//添加到页面
document.body.appendChild(my);
//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
my.style.position="absolute";
//通过样式指定x坐标(随机数0~450)
my.style.top= Math.round(Math.random()*450);
//通过样式指定y坐标(随机数0~700)
my.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
my.style.width=100;
//通过样式指定高度
my.style.height=100;
//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc";
//添加div的内容
my.innerHTML=i++;
}
</script>
<head>
<title>动态添加div</title>
</head>
<body>
<form>
<input type="button" value="添加" onclick="add()" />
</form>
</body>
</html>
二.动态添加事件 <html>
<head>
<title>动态添加事件</title>
<script language="javascript">
i=1;
/*用来测试的方法*/
function test1(){
alert("用我了吧;")
}
/*用来测试带参数的方法*/
function test2(par){
alert(par);
}
/*添加层*/
function add(){
var my = document.createElement("div");
document.body.appendChild(my);
my.style.backgroundColor="#ffccff";
my.innerHTML="点我一下";
//看好拉!关键的地方,第一种方法
my.setAttribute("onclick",function(){ test1() });
/*setAttribute(a,b)该方法添加标签的属性和属性的值,有俩个参数,第一个参数a是属性名称,第二个参数b是属性的值;因为onclick也是div标签的一个属性,所以可以这样设置;*/
var my2 = document.createElement("div");
document.body.appendChild(my2);
//设置id
my2.id=i;
my2.style.backgroundColor="#ffcc00";
my2.innerHTML="点我一下";
/*第二种方法*/
//让id变成字符串
var idd=i+"";
//通过id找到该标签,设置他的onclick事件
document.getElementById(i).onclick=function(){ test2(i)};
i++;
}
</script>
</head>
<body>
请用ie打开,不好意思.呵呵
<form>
<input type="button" value="添加" onclick="add()"/>
</form>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
