JS添加删除DIV的简单实例


Posted in Javascript onJuly 08, 2016

JS添加删除DIV的简单实例

function addDiv(w,h){ 
 //如果原来有“divCell”这个图层,先删除这个图层
 deleteDiv();
 //创建一个div 
 var my = document.createElement("divCell"); 
 //添加到页面 
 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=w; 
 //通过样式指定高度 
 my.style.height=h; 
 //通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)" 
 my.style.backgroundColor="#ffffcc"; 
 //添加div的内容 
 //my.innerHTML=i++; 
 //设置样式透明
 my.style.filter = "alpha(opacity=50)";
 //设置ID
 my.id = "divCell"; 
 }
 
 function deleteDiv()
 {
 var my = document.getElementById("divCell");
 if (my != null)
  my.parentNode.removeChild(my);
 }

以上这篇JS添加删除DIV的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jsonp原理及使用
Oct 28 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 #Javascript
简单封装js的dom查询实例代码
Jul 08 #Javascript
JS选取DOM元素的简单方法
Jul 08 #Javascript
封装获取dom元素的简单实例
Jul 08 #Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 #Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 #Javascript
Augularjs-起步详解
Jul 08 #Javascript
You might like
深入PHP FTP类的详解
2013/06/13 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
angular分页指令操作
2017/01/09 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
数控个人求职信范文
2014/02/03 职场文书
公司接待方案
2014/03/08 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
减负增效提质方案
2014/05/23 职场文书
工地安全生产标语
2014/06/06 职场文书
心理学专业求职信
2014/06/16 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
孔子观后感
2015/06/08 职场文书