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的blockui插件显示弹出层
Apr 14 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
PHPMailer 中文使用说明小结
2010/01/22 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python简单实例训练(21~30)
2017/11/15 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
财务助理岗位职责
2013/11/10 职场文书
文化活动实施方案
2014/03/28 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
综合办公室岗位职责
2015/04/11 职场文书
商场营业员岗位职责
2015/04/14 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书