一. 添加div
不指添加div,添加其他元素都可以通过这种方式
<html>
<script language="javascript">
i=1;
/*添加div*/
function add(){
//创建一个div
var my = document.createElement("div");
//添加到页面
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=100;
//通过样式指定高度
my.style.height=100;
//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc";
//添加div的内容
my.innerHTML=i++;
}
</script>
<head>
<title>动态添加div</title>
</head>
<body>
<form>
<input type="button" value="添加" onclick="add()" />
</form>
</body>
</html>
二.动态添加事件
<html>
<head>
<title>动态添加事件</title>
<script language="javascript">
i=1;
/*用来测试的方法*/
function test1(){
alert("用我了吧;")
}
/*用来测试带参数的方法*/
function test2(par){
alert(par);
}
/*添加层*/
function add(){
var my = document.createElement("div");
document.body.appendChild(my);
my.style.backgroundColor="#ffccff";
my.innerHTML="点我一下";
//看好拉!关键的地方,第一种方法
my.setAttribute("onclick",function(){ test1() });
/*setAttribute(a,b)该方法添加标签的属性和属性的值,有俩个参数,第一个参数a是属性名称,第二个参数b是属性的值;因为onclick也是div标签的一个属性,所以可以这样设置;*/
var my2 = document.createElement("div");
document.body.appendChild(my2);
//设置id
my2.id=i;
my2.style.backgroundColor="#ffcc00";
my2.innerHTML="点我一下";
/*第二种方法*/
//让id变成字符串
var idd=i+"";
//通过id找到该标签,设置他的onclick事件
document.getElementById(i).onclick=function(){ test2(i)};
i++;
}
</script>
</head>
<body>
请用ie打开,不好意思.呵呵
<form>
<input type="button" value="添加" onclick="add()"/>
</form>
</body>
</html>
分享到：
相关推荐
我实现了多个div的动态添加，并且实现指定div的删除。 实现这个功能一些问题，添加多个div，它们id就可能会相同，这对我们无论后台还是前台处理都有麻烦的问题。所以我对id进行自增，然后就是要实现对指定div的删除...
2. **选择目标`div`**：给要全屏的`div`元素添加一个唯一的ID，这样我们可以通过JavaScript来选中它。例如： ```html <div id="fullscreen-div"> <!-- 内容 --> </div> ``` 3. **编写jQuery插件**：编写一个...
在JavaScript编程中，实现DOM元素（如DIV）的拖拽和动态添加是常见的交互功能，这对于构建具有用户友好界面的Web应用至关重要。本教程将详细讲解如何使用纯JavaScript实现这一功能，无需依赖任何外部库，如jQuery或...
在网页设计中，"js控制div左右切换带左右箭头"是一...总的来说，“js控制div左右切换带左右箭头”是一个结合了HTML、CSS和JavaScript技术的典型示例，它展示了如何通过编程实现网页上的动态交互，提高用户的浏览体验。
在IT领域，特别是前端开发中，使用JavaScript（简称JS）创建动态元素是常见的需求之一。本次探讨的主题聚焦于“js 创建div层”，这不仅是一种基本的网页操作技能，也是实现网页动态效果、交互设计的基础。以下将从...
本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...
在构建模态对话框时，我们通常会创建一个隐藏的 `div` 元素，然后通过 JavaScript 来控制它的显示和隐藏，以实现对话框的效果。 `dd.html` 文件可能是包含对话框HTML结构的示例文件。在 HTML 结构中，模态对话框...
在JavaScript（JS）中，"鼠标浮动显示div"是一种常见的交互设计，通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...
使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法： var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
本文介绍了几种使用JavaScript实现页面滚动到指定div位置的解决方案。这些方法主要包括锚点法、jQuery的animate方法、window.scrollTo方法和scrollIntoView方法。下面将详细解析每种方法的原理、使用方法及优缺点。 ...
JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件，它通过在页面上动态创建一个可浮动的DIV元素来展示日历，用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript（简称JS...
总结来说，"javascript div弹出窗口 可封装为JS类"这个主题涉及到了JavaScript基础、HTML DOM操作、CSS样式设计以及模块化编程思想。通过封装`div`弹窗为JS类，我们可以创建一个灵活、可维护的弹窗系统，便于在各种...
3. **监听鼠标移动**：在 `mousedown` 事件处理函数中调用 `addEventListener` 添加 `mousemove` 事件监听器，实时计算并更新 Div 的位置。 4. **释放事件监听器**：当用户松开鼠标左键时，移除 `mousemove` 事件...
以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中，你可以选择使用库或框架，如jQuery UI的Resizable组件，来简化这一过程。然而，理解这些基础知识将帮助你更好地理解和定制功能，特别...
标题"js限制DIV输入回车"所涉及的知识点，就是如何使用JavaScript来阻止或改变`div`内的回车事件默认行为。在描述中提到，可以更改回车的功能，比如将回车键映射为输入特定的文字，如“你好我好大家好”。 首先，...
在JavaScript中创建动态的div层是一项常见的任务，特别是在构建交互式网页或动态用户界面时。div元素是HTML中的一种块级元素，常被用来组织页面布局。本篇将详细介绍如何利用JavaScript来创建、操作和关闭div层，并...
在JavaScript的世界里，实现元素的拖动（dragging）和大小调整（resizing）功能是非常常见的需求，尤其是在构建交互式Web应用时。这个话题涉及到前端开发中的DOM操作、事件监听以及CSS样式控制等重要知识点。本篇...
在JavaScript（js）开发中，有时我们需要将网页的一部分，如div的内容，转化为图片并提供下载功能。这在数据可视化、屏幕截图或者用户自定义布局的保存场景中非常常见。本篇将详细介绍如何实现这一功能，并重点讲解...
本项目涉及的核心知识点是使用JavaScript（JQ和原生JS）与HTML来实现`div`元素的动态交互功能，包括移动、大小调整、右键菜单以及限制`div`在特定范围内的操作。下面将详细解释这些技术点。 1. 移动`div`： 在HTML...
在JavaScript中，对DIV的操作主要包括获取元素、修改属性、添加和删除事件监听器，以及动态创建和销毁元素。对于弹出窗口，模态对话框和非模态弹出框的实现主要依赖于CSS和JavaScript的结合使用，浮动窗口则涉及到...