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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
微信小程序实现循环动画效果
Jul 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php生成RSS订阅的方法
2015/02/13 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js charAt的使用示例
2014/02/18 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JS中的phototype详解
2017/02/04 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python删除文件示例分享
2014/01/28 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Jsonp劫持学习
2021/04/01 PHP
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers