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 剧场版 你必须知道的javascript
May 27 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
js实现直播点击飘心效果
Aug 19 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程序之die调试法 快速解决错误
2009/09/17 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP基础知识介绍
2013/09/17 PHP
php实现的日历程序
2015/06/18 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Python实现代码统计工具
2019/09/19 Python
详解Flask前后端分离项目案例
2020/07/24 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
super()与this()的区别
2016/01/17 面试题
高校教师自荐信范文
2014/03/13 职场文书
三项教育活动实施方案
2014/03/30 职场文书
气象学专业个人求职信
2014/04/22 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL