<html>
<head>
<title>js控制div元素在页面的位置</title>
</head>
<style type="text/css">
#a{
background:#FF0000;
height: 100px;
width: 100px;
float: left;
}
#b{
background:#0000FF;
height: 100px;
width: 100px;
float: left;
position: absolute;
top: 500px;
right: 500px;
}
body {
margin: 0px;
padding: 10px;
}
</style>
<script language="javascript">
function ab(){
var a=document.getElementById("a");
var b=document.getElementById("b");
var bX=a.offsetLeft+a.offsetWidth;
var bY=a.offsetTop+a.offsetHeight;
b.style.top=bX+"px";
b.style.left=bY+"px";
}
</script>
<body >
<div id="a" onclick="ab()">a</div>
<div id="b" >b</div>
</body>
</html>
分享到：
相关推荐
jQuery的animate方法能够实现平滑滚动的效果，通过给页面中的html和body标签添加动画属性，使页面滚动到指定的div元素顶部。示例如下： ```javascript $(document).ready(function(){ $("#p1").click(function(){ ...
在网页设计中，"js控制div左右切换带左右箭头"是一种常见的交互效果，它用于展示多内容区域，用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中，能够提供...
在网页设计中，有时我们需要将某个`div`元素设置为全屏显示，以提供沉浸式的用户体验或特定功能的实现。JavaScript（简称js）作为一种强大的客户端脚本语言，可以帮助我们轻松实现这一需求。在这个项目中，我们使用...
在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。fixed值可以让元素固定在页面的某个位置，而不受滚动条的...
在JavaScript（JS）中，创建动态的用户界面效果是一种常见的需求，比如div元素的分散、合拢、淡入淡出效果。这些效果可以提升用户体验，让网页更具吸引力。本篇文章将详细讲解如何利用JS实现这样的视觉特效，尤其...
标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素，特别是`div`元素位置的技术。在这个示例中，开发者可能想要创建一个交互式的用户界面，用户可以通过鼠标拖拽来调整`div`元素的顺序...
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
本示例“JS拖拽DIV后保存位置”是关于如何使用JavaScript实现用户可以拖动HTML中的<div>元素，并在拖动后保存其位置。通达OA（Tongda Office Automation）是一款企业级协同办公软件，此实例可能是为通达OA的自定义...
在网页设计中，让div元素根据内容自动调整其高度是一个常见的需求。这有助于保持页面布局的灵活性和响应性，尤其是在内容长度不确定的情况下。本篇文章将深入探讨如何利用JavaScript（JS）和CSS结合来解决div自适应...
在本文中，我们将深入探讨如何使用JavaScript来获取页面中div元素的坐标。这是一项基础且实用的技术，在Web开发中经常会用到，尤其是在进行DOM操作、实现自定义的交互效果或开发动画时，获取元素的位置信息是必不可...
在这个拖动插件中，jQuery可能被用来选择特定的div元素，并添加必要的事件监听器，以便当用户按下鼠标并移动时，div能跟随鼠标移动。 JavaScript作为浏览器端的主要编程语言，负责实现插件的核心逻辑。它处理拖动...
在网页开发中，JavaScript（JS）是一种至关重要的脚本语言，它允许开发者动态地操作页面元素，如改变其尺寸、位置、内容等。标题“js控制六个div的大小变化”指出，我们将探讨如何使用JavaScript来调整HTML中的六个...
在网页开发中，jQuery 和 JavaScript 是两种常用的编程语言，它们能帮助我们实现各种动态效果，包括控制`div`元素的滚动条（scroll）样式。在本项目中，"jquery+js 控制div的scroll样式效果"是核心目标，通过这个...
2. align：设置或获取Div元素的对齐方式，可以是"left", "right", "center", "justify"等，用于调整元素在页面上的位置。 3. atomicselection：指定元素及其内容是否可以作为一个不可见单位被选中，通常用于编辑器...
在网页设计中，`div` 和 `css` 是构建页面布局的基本元素，而JavaScript（简称`js`）则为交互性提供了强大的支持。本话题主要关注如何利用这三种技术实现一个可拖拽的弹出层，让用户可以自由地在浏览器窗口内移动它...
在"dragresize"库中，这个功能被应用到了页面上的DIV元素上。当用户点击并拖动某个具有dragresize功能的DIV边缘时，该DIV会跟随鼠标移动，从而改变其在页面上的位置。实现这一功能的关键在于监听鼠标的mousedown、...
标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能，即在用户滚动网页时，使指定的DIV元素始终保持在屏幕的某个固定位置，这种效果通常被称为“粘性导航”或“固定定位”。...
要使用Ajax来控制div的显示，首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后，根据返回的数据决定是否显示或隐藏特定的div。例如，服务器可能返回一个JSON对象，其中包含一个布尔值，表示是否显示...
在网页开发中，实现页面元素如`div`的拖动交换位置以及动态添加删除功能，是一种常见的交互设计，可以提高用户的操作体验。本项目通过利用JavaScript库jQuery和jQuery UI，结合CSS样式，实现了这一功能。 首先，...
在前端开发中，有时我们需要通过JavaScript来动态地调整页面元素的位置，比如实现两个`<div>`元素的位置互换。本篇文章将详细解析如何通过JavaScript实现这一功能，并深入探讨相关技术细节。 #### 核心概念与原理 ...