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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Django 自动生成api接口文档教程
2019/11/19 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
毕业自荐书
2013/12/09 职场文书
班级聚会策划书
2014/01/16 职场文书
公司寄语大全
2014/04/10 职场文书
小学庆六一活动总结
2014/08/28 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Python之matplotlib绘制饼图
2022/04/13 Python