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 相关文章推荐
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现包含min函数的栈
2016/04/29 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
村道德模范事迹材料
2014/08/28 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
运动会致辞稿
2015/07/29 职场文书
职工培训工作总结
2015/08/10 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python