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设置按钮的disabled属性的实现代码
Nov 28 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
js实现简单的秒表
Jan 16 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
js尾调用优化的实现
2019/05/23 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python3中的json模块使用详解
2018/05/05 Python
python实现简单flappy bird
2018/12/24 Python
python获取array中指定元素的示例
2019/11/26 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
军训自我鉴定范文
2014/02/13 职场文书
学生请假条格式
2014/04/11 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
婚庆答谢词大全
2015/09/29 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python