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用户注册提示效果的简单实例
Aug 17 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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中创建和验证哈希的简单方法实探
2015/07/06 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python 实现堆排序算法代码
2012/06/05 Python
tornado框架blog模块分析与使用
2013/11/21 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python实现购物车程序
2018/04/16 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
期末自我鉴定
2014/01/23 职场文书
小学毕业寄语大全
2014/04/03 职场文书
应聘教师自荐书
2014/06/16 职场文书
体育课外活动总结
2014/07/08 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
标准发言稿结尾
2019/07/18 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python