一. 添加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>
分享到:
相关推荐
我实现了多个div的动态添加,并且实现指定div的删除。 实现这个功能一些问题,添加多个div,它们id就可能会相同,这对我们无论后台还是前台处理都有麻烦的问题。所以我对id进行自增,然后就是要实现对指定div的删除...
使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
很棒的用Javascript实现DIV的拖拽和添加
纯js操作div移动 伸缩,支持快捷键
移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。
用javascript css div实现弹出模态对话框,盖住下面的部分,上面的透明度改变
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现 Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用Javascript+CSS+DIV实现的选项卡,非常不错,有横排选项和竖排选项两种可供参考,内涵了简单的CSS和JS脚本,并以DIV层展示。
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂。...一、js 动态添加元素div <div id=parent></div> function addElementDiv(obj) { var parent =
主要介绍了JavaScript正则表达式匹配<div><style>标签 的相关资料,需要的朋友可以参考下
<br>释放后虚线消失,需要添加选择可重复第“3”,“4”步操作,多次选择的节点选中。 <br>快捷键选择,Ctrl +A全选,Ctrl +X反选,Ctrl +Z取消选择。 <br>移动位置,选中DIV后,如果单选组选中移动(-)...
如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div <div di=dction_1> ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
自己改写的js弹出div层模拟alert 可以自定义样式 在iframe框架中使用 避免了覆盖层只覆盖子页面的问题
用js和jquery做的一个批量选择div,并能随意移动div,一个或多个div其选择。操作流程是先添加div然后选取所要移动的div,当div变成绿色的时候进行拖动。 是一个简单的js代码。
<br>释放后虚线消失,需要添加选择可重复第“3”,“4”步操作,多次选择的节点选中。 <br>快捷键选择,Ctrl +A全选,Ctrl +X反选,Ctrl +Z取消选择。 <br>移动位置,选中DIV后,如果单选组选中移动(-)...
Asp.net+JavaScript 实现的可拖动、可调节大小的 div层,div层中添加 sql2000 数据 开发工具:Visual2005,兼容Visual2008 数据库名:2010Expo 数据库附加失败可以直接建表manage 表属性manageid,managename,phone,...
JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有“divCell”这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body....