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动态呼叫函数(两种方式)
May 03 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
数据库基础的一些面试题
2012/02/25 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
职业女性的职业规划
2014/03/04 职场文书
学校联谊协议书
2014/09/16 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
决心书格式及范文
2019/06/24 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python