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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
浅析JS异步加载进度条
May 05 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JS实现吸顶特效
2020/01/08 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python简单实例训练(21~30)
2017/11/15 Python
python简单实现操作Mysql数据库
2018/01/29 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
.net面试题
2015/12/22 面试题
服务之星获奖感言
2014/01/21 职场文书
摄影助理岗位职责
2014/02/07 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
2014年党员承诺书范文
2014/05/20 职场文书