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中的16进制字符(改进)
Nov 21 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
js前端导出Excel的方法
Nov 01 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 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
mysql limit查询优化分析
2008/11/12 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
电力安全事故反思
2014/04/27 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL