`
- 浏览:
165071 次
- 性别:
- 来自:
成都
-
Javascript拖拽之offsetParent属性
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null 。
句法
parentObj = element.offsetParent
变量
· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。
当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。
当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素；如果父层次中的所有容器元素都没进行定位，则这个元素的offsetParent属性的取值为根元素。
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性
</div>
</body>
</html>
以上代码的Alert警告框中显示的为“BODY”。
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#parent{
position:absolute;
<!--position：relative;-->
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">
div测试代码<p id="sonObj">测试OffsetParent属性
</div>
</body>
</html>
以上代码的Alert警告框中显示的为“DIV”。
分享到：
相关推荐
第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ element.offsetParent Summary offsetParent returns a ...
在阅读本文之前，请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性，因为循序渐进是一个很好的习惯，值得提倡。好了，看看我们今天的内容吧。 首先让我们先看一看element.offsetLeft属性。 支持的...
总结起来，`offset`系列属性在JavaScript中是获取和处理元素位置及大小的关键，它们在实现动态布局、交互功能如拖动模块等方面发挥着重要作用。理解并熟练运用这些属性，可以极大地增强你在前端开发中的能力。
1. **事件处理**：JavaScript中的事件监听是实现拖拽的基础。例如，`onmousedown`事件用于检测用户何时开始拖动，`onmousemove`事件追踪鼠标移动，而`onmouseup`事件则在用户松开鼠标时触发。这些事件的处理函数会...
这份文档《JavaScript经典代码大全收集.pdf》中展示了许多JavaScript的经典代码片段，这些片段涵盖了JavaScript在网页编程中的常见用途，包括操作DOM元素、事件处理、页面跳转、弹窗、焦点控制等多个方面。...
- **应用场景**：适用于需要精确知道元素位置的场景，如拖拽效果、弹窗定位等。 #### 12. 输入光标定位 - **代码示例**： ```javascript function cc() { var e = event.srcElement; var r = e....
HTML精确定位属性:scrollLeft,scrollWidth,clientWidth,...offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象
在网页设计中，JavaScript的经典特效之一就是“打开窗口的移动”效果，这通常指的是创建一个可移动的弹出窗口或者对话框，用户可以通过鼠标拖动来改变其在页面上的位置。 在"javascript经典特效---打开窗口的移动....
`offsetTop`和`offsetLeft`属性可以获取元素相对于其offsetParent的顶部和左侧的距离，这对于计算元素的新位置至关重要。 此外，计算器的逻辑部分会涉及到JavaScript的基本运算符和函数，如加减乘除、取余数等，...
这是一项非常实用的技术，在网页开发中有着广泛的应用场景，比如在实现拖拽功能、元素定位或者响应式设计时，都需要准确地知道元素的位置。 ### JavaScript 获取页面元素坐标的方法 #### 一、了解基本概念 在开始...
在本文中，我们将深入探讨如何利用JavaScript实现右键菜单功能和拖拽功能。 首先，让我们关注右键菜单功能的实现。在HTML中，我们创建了一个id为"menu"的div元素，它在默认情况下是隐藏的。当用户右键点击时，通过`...
在JavaScript中实现拖动布局是一项常见的交互设计任务，它可以增强用户对网页元素的操控感。以下是如何使用JavaScript来实现这一功能的详细步骤和关键知识点： 首先，我们需要了解基础的JavaScript事件处理。在这个...
在现代Web开发中，拖拽功能已成为提升用户界面友好性与交互性的关键要素之一。它允许用户通过鼠标或触摸屏直接移动页面上的元素，如模块、图片或文本块，从而更加直观地组织和定制页面布局。例如，iGoogle（谷歌个性...
在JavaScript（JS）中实现鼠标拖拽图片位置调换特效是一项常见的交互设计技术，它可以提升用户的体验，使得用户可以通过简单的鼠标操作改变页面上元素的位置。本文将深入探讨如何使用JavaScript来实现这一效果，并且...
在网页设计中，弹出层是一种常见的交互元素，...弹出层的样式可以通过CSS自定义，JavaScript则负责处理交互逻辑，如弹出层的显示、隐藏以及拖动行为。这样的技术在现代网页开发中非常常见，可以提供更丰富的用户体验。
使用`offsetParent`属性可以找到最近的已定位祖先元素。 除此之外，鼠标事件对象中还有几个重要的坐标属性：`clientX`、`clientY`、`pageX`和`pageY`。`clientX`和`clientY`表示事件发生时鼠标指针相对于浏览器窗口...
`offsetParent`是指当前元素的定位父元素，它可以是`<body>`、`<table>`、`<td>`或其他具有定位属性（如`position: relative;`、`position: absolute;`或`position: fixed;`）的元素。`offsetLeft`正是基于这个`...
`pageX` 函数通过递归调用自身来累加偏移量，`pageY` 函数则直接返回元素的`offsetTop`属性，如果元素有`offsetParent`属性，则继续向上递归计算。 2. 事件绑定：在代码中，元素的`mouseover`、`mousedown`、`...