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和CSS速查手册
Aug 20 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
loading动画特效小结
Jan 22 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 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 array_map()数组函数使用说明
2011/07/12 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JS常用算法实现代码
2016/11/14 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
5种Python单例模式的实现方式
2016/01/14 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
应届生保险求职信
2013/11/11 职场文书
干部现实表现材料
2014/02/13 职场文书
优秀团队获奖感言
2014/02/19 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
工作失职检讨书范文
2015/05/05 职场文书
初中班长竞选稿
2015/11/20 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python