js动态创建及移除div的方法


Posted in Javascript onJune 03, 2015

本文实例讲述了js动态创建及移除div的方法。分享给大家供大家参考。具体实现方法如下:

//创建div
function createDiv(){
 if(document.getElementByIdx_x("newD")!=null)
  document.body.removeChild(document.getElementByIdx_x("newD"));
 var Div = document.create_rElement("div");//创建div
 Div.setAttribute("id", "newD");
 Div.style.position = "absolute";
 Div.style.height = "160px";
 Div.style.width = "400px";
 Div.style.border = "1px solid grey";
 Div.style.background = "white";
 Div.style.paddingTop = "40px";
 Div.style.zIndex = "100";
 Div.style.left = 100 +"px";//注意Firefox下必须加"px"
 Div.style.top = 100 +"px";
 Div.style.textAlign = "center";
 Div.style.fontSize = "18px";
 var str = "<div id=\"divClose\" onclick=\"removeDiv()\" style=\"width:16px;height:16px;float:right;margin-top:-40px;background:url(images/divClose.gif);\"><\/div>";
 Div.innerHTML = str + title;
 document.body.appendChild(newD);
}
//移除创建的div
function removeDiv(){
 document.body.removeChild(document.getElementByIdx_x_x("newD"));
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
Vuex 入门教程
Jan 10 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 #Javascript
利用js实现禁止复制文本信息
Jun 03 #Javascript
详解JavaScript中循环控制语句的用法
Jun 03 #Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 #Javascript
JavaScript中for循环的使用详解
Jun 03 #Javascript
详解JavaScript的while循环的使用
Jun 03 #Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 #Javascript
You might like
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
使用Python函数进行模块化的实现
2019/11/15 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python实现飞船大战
2020/04/24 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
2014政务公开实施方案
2014/02/19 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
招标承诺书
2014/08/30 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
交通安全横幅标语
2014/10/07 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技