`

动态创建层 javascript 代码

阅读更多

<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
function cdiv(){
if($('div1')==undefined)
{
var createDiv = document.createElement("div");
// createDiv.setAttribute("class","aaa")
createDiv.style.border = "1px solid #ccc";
createDiv.setAttribute("id","div1");
createDiv.style.background = "#f60";
createDiv.style.height = "20";
createDiv.setAttribute("position","absolute");
createDiv.style.margintop = $('tlink').offsetTop;
createDiv.style.marginleft =$('tlink').offsetLeft+"10000";
var createText = document.createTextNode("我是一个层");
var img = new Image();
img.src="logo.jpg";
createDiv.appendChild(createText);
createDiv.appendChild(img);
var tlink = document.getElementById("tlink");

var parent = tlink.parentNode;
if(parent.lastChild == tlink) {
parent.appendChild(createDiv);
} else {
parent.insertBefore(createDiv, tlink.nextSibling);
}

}
}


window.onload = function(){
tlink.onclick=function()
{
cdiv();
}
}
</script>
</head>
<input type="text" id="tlink">

function cdiv(){
if($('div1')==undefined)
{
var createDiv = document.createElement("div");
// createDiv.setAttribute("class","aaa")
createDiv.style.border = "1px solid #ccc";
createDiv.setAttribute("id","div1");
createDiv.style.background = "#f60";
createDiv.setAttribute("position","absolute");
createDiv.style.height = 10;
createDiv.style.width = 100;
createDiv.style.top =100;
createDiv.style.left =100;
createDiv.style.position ="absolute";
var createText = document.createTextNode("我是一个层");
var img = new Image();
img.width =1;
img.height=10;
img.src="logo.jpg";
createDiv.appendChild(img);
createDiv.appendChild(createText);

var tlink = document.getElementById("tlink");
var parent = tlink.parentNode;
if(parent.lastChild == tlink) {
parent.appendChild(createDiv);
} else {
parent.insertBefore(createDiv, tlink.nextSibling);
}

}
}

分享到:
评论

相关推荐

    JavaScript基础和实例代码

    1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间...

    JavaScript教程

     JavaScript代码的加入  基本数据类型  表达式和运算符  范例:跑马灯效果 • 三、 JavaScript程序构成  程序控制流  函 数  事件驱动及事件处理  范例:自动装卸载;获取版本号 • 四、 基于对象的...

    JavaScript语言参考手册

    Netscape AppFoundry Online 是应用程序起始之源、技术信息、工具和用于快速创建和动态发布开放的 Intranet 应用程序的专家论坛。该站在资源区中包括解决问题的信息,以及设置 JavaScript 环境的额外帮助。 ...

    JavaScript核心技术 PDF扫描版

    JavaScript核心技术 简介: 《JavaScript核心技术...第11章创建定制的JavaScript对象 第12章构建动态网页:在脚本中加入样式 第13章使用Ajax 第14章好消息:生动的程序库!令人惊异的Web服务!有趣的API! 附录习题答案

    【JavaScript源代码】angularjs循环对象属性实现动态列的思路详解.docx

     angularjs循环对象属性实现动态列 优点:保存对象,在数据库只保存一条数据 缺点:添加对象属性需要修改表结构、代码,然后重新重新发布 实现思路 1)数据库创建表(对象)、创建字段(对象属性) 2)根据表...

    JavaScript基础教程第8版

    5.5 创建动态iframe 89 5.6 在文档之间共享函数 90 5.7 打开新窗口 92 5.8 为窗口加载不同的内容 96 第6章 表单处理 98 6.1 选择并转移导航菜单 99 6.2 动态地改变菜单 102 6.3 建立必须填写的字段...

    程序天下:JavaScript实例自学手册

    2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 ...

    JavaScript详解(第2版)

    1.11 JavaScript代码放在哪儿 17 1.12 验证标签 20 1.12.1 W3C验证工具 21 1.12.2 Validome验证工具 21 1.13 应知应会 22 练习 23 第2章 脚本的安装 24 2.1 HTML文档与JavaScript 24 2.2 语法细节 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字...

    源文件程序天下JAVASCRIPT实例自学手册

    1.4 如何引入JavaScript脚本代码 1.4.1 通过[removed]与[removed]标记对引入 1.4.2 通过[removed]标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码...

    《javaScrip开发技术大全》源代码

    • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     第5章 动态修改样式和层叠样式表   5.1 W3CDOM2样式规范   5.1.1 CSSStyleSheet对象   5.1.2 CSSStyleRule对象   5.1.3 CSSStyleDeclaration对象   5.1.4 支持的匮乏   5.2 当DOM 脚本遇到...

    javascript网页特效实例大全

    1.7.3 创建对象 20 1.7.4 使用对象 22 1.7.5 其他内部对象 24 1.8 小结 26 第2章 javascript中事件. 窗口和框架的处理 27 2.1 事件处理的基本概念 28 2.2 常用事件及处理 28 2.2.1 浏览器事件 29 2.2.2 鼠标...

    JQuery权威指南源代码

    JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤选择器 使用jQuery属性过滤选择器...

    JS学习资料

     8.6 JavaScript代码  8.7 小结  8.8 下章简介 第9章 CSS-DOM  9.1 三位一体的网页  9.2 style属性  9.3 何时该用DOM脚本去设置样式信息  9.4 className属性  9.5 小结 第10章 用JavaScript实现...

    ZK框架学习总结

    ZK的实现完全用java实现,开发过程中不会有任何的JavaScript代码,但是通过将zul文件(ZK的源文件,类似于jsp文件)通过ZK引擎编译后查看页面源代码,结果还是可以看到,ZK实现的本质还是通过JavaScript+CSS来处理...

    JAVA上百实例源码以及开源项目源代码

    JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器  Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器...

    jQuery权威指南-源代码

    此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼,使用少量代码就可以实现复杂的功能。特别是新版本1.4.x的发布,jQuery在功能和性能方面都有质的提升,极大...

Global site tag (gtag.js) - Google Analytics