【转】JS写图层方法.document.createElement("div")

最新推荐文章于 2023-06-09 13:13:22 发布
最新推荐文章于 2023-06-09 13:13:22 发布
阅读量2k 收藏
点赞数
分类专栏： JS与JQuery 

<script language="javascript">
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "500px";
newDiv.style.height = "300px";
newDiv.style.top = "50px";
//newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容    ";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
//newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);

// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function() {
   document.body.removeChild(docEle(_id));
   document.body.removeChild(docEle(m));
   return false;
}
newDiv.appendChild(newA);
}
</script>

<body>
<a href="#" οnclick="openNewDiv('newDiv');return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
</body>

该文章转载自网络大本营：http://www.xrss.cn/Info/14120.Html




如果当前窗口含有滚动条，要让生成的div居中显示： 

var w = jQuery(myAlert).innerWidth(),
		h = jQuery(myAlert).innerHeight();
	jQuery(myAlert).css({
		'position':'fixed',
		'top':'50%',
		'left':'50%',
		'margin-top':-(h/2),
		'margin-left':-(w/2)
	}).show();

myAlert是要弹出的div，fixed表示不随滚动条滚动，w和h算出来的是div的高和宽

jinhua1314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1894
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
IE9+已经不对document.createElement向下兼容的解决方法
09-03
主要介绍了IE9+已经不对document.createElement向下兼容的解决方法,需要的朋友可以参考下
JS写图层方法.document.createElement(div).htm
01-21
JS写图层方法.document.createElement(div).
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 352
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：[email protected] 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
简化document.createElement("div")动态生成层方法
weixin_30535843的博客
09-07 788
我们在WEB开发时，很多时候往往需要我们 JavaScript 来动态建立 html 元素，动态的设置相关的属性。比方说我们想要建立一個 div 层，则可以使用以下代码实现。 一.直接建立function Button1_onclick() //直接采用代码建立一个DIV{ var newElement = document.createElement('div'); ...
document.createElement()的使用和 createTextNode() 方法
wqr111的博客
12-30 1435
小例子代码： var h=document.createElement("H1") var t=document.createTextNode("Hello World"); h.appendChild(t); 结果： Hello World 代码事件创建移除 <div id="div1"> 待删除的div1,可以点击按钮删除 </div> <button onclick="appChild()">创建添加元素...
js创建子元素：innerHTML与document.createElement()
wsj2311161832的博客
01-24 3675
建议（创建少量元素时）： 1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。 原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。 2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。 原因：用document.createElement()创建元素插入顺序，可以通过elemen...
【js】document.createElement创建添加属性
michiko98的博客
10-27 4799
createElement js
JS 在div中添加元素：使用document.createElement（）
weixin_50784508的博客
06-09 1607
【代码】JS 在div中添加元素：使用document.createElement（）
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 3565
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
节点创建删除、元素属性设置获取、节点属性
weixin_43641912的博客
04-24 386
c.insertBefore(a,b)插入,在父级c节点下的子节点b之前插入a,Node.prototype。appendChild()增加子节点，动态的增加节点和动态的剪切节点在Node.prototype上。在原型上写一个，寻找兄弟元素节点的方法，为正找之后 ，为负数，之前的第N个，为0 找自己。父节点.removeChild(子节点)只是从dom树上删除，这个值还保存在内存中。在原型上写一个遍历父元素的子元素节点的方法。在原型上写一个找出一个元素的第N层父元素。写一个子元素逆序的方法。
动态加载js文件 document.createElement
12-11
代码如下:var Rash=true; var msg=””; function norash() { if (confirm(“确定要取消吗”)) Rash=false; } function rashit() { setInterval(‘getrss()’,Int... script=document.createElement(‘sc
document.createElement("A")比较不错的属性
10-30
document.createElement("A")比较不错的属性
document.createElement()用法
09-05
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点
麦肯锡 组织 概述与基本框架gl.ppt
05-05
麦肯锡 组织 概述与基本框架gl.ppt
node-v10.11.0-linux-s390x.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
大型强子对撞机电源转换器设计与运行挑战
05-05
大型强子对撞机电源转换器设计与运行挑战
document.body.oncopy = function () { var body_element = document.getElementsByTagName('body')[0]; //获取当前所有文本内容 var selection; selection = window.getSelection(); // 获取当前用户所选内容 var tmp = selection.toString(); // 转化成字符串 var copytext = tmp.substring(0,200) ; // 截取字符串 var newdiv = document.createElement('div'); // 新增图层 body_element.appendChild(newdiv); //新增图层添加到body_element newdiv.innerHTML = copytext; //图层添加"selectAllChildren"内容 selection.selectAllChildren(newdiv); // 选择并选中"newdiv"的所有子元素 }; document.body.ondragstart = function() { // alert('禁止拖拉'); return false; }
07-15
1. 当用户复制文本时，将选中的文本内容截取为字符串，并添加到一个新创建的div元素中。 2. 阻止用户拖动文本。 代码中的注释已经很清楚地解释了每个步骤的操作。您可以将这段代码添加到您的JavaScript文件中，或者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值