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使用cookie
Feb 02 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
javascript canvas API内容整理
Feb 16 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
浅谈JS的原型和原型链
Jun 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开发中常用的8个小技巧
2008/08/27 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
如何基于python测量代码运行时间
2019/12/25 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
Android面试题附答案
2014/12/08 面试题
导游实习生自荐书
2014/01/28 职场文书
同事吵架检讨书
2014/02/05 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
英文演讲稿
2014/05/15 职场文书
优秀求职信
2014/05/29 职场文书
优秀党员申报材料
2014/12/18 职场文书
满月酒邀请函
2015/01/30 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript