以下是YUI用的函数:
isSafari = (document.childNodes && !document.all && !navigator.taintEnabled);
var getXY = function(el) {
if (document.documentElement.getBoundingClientRect) { // IE
var box = el.getBoundingClientRect();
var rootNode = el.ownerDocument;
return [box.left + getDocumentScrollLeft(rootNode), box.top +
getDocumentScrollTop(rootNode)];
} else {
var pos = [el.offsetLeft, el.offsetTop];
var parentNode = el.offsetParent;
// safari: subtract body offsets if el is abs (or any offsetParent), unless body is offsetParent
var accountForBody = (isSafari &&
el.style['position'] == 'absolute' &&
el.offsetParent == el.ownerDocument.body);
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
if (!accountForBody && isSafari &&
parentNode.style['position'] == 'absolute' ) {
accountForBody = true;
}
parentNode = parentNode.offsetParent;
}
}
if (accountForBody) { //safari doubles in this case
pos[0] -= el.ownerDocument.body.offsetLeft;
pos[1] -= el.ownerDocument.body.offsetTop;
}
parentNode = el.parentNode;
// account for any scrolled ancestors
while ( parentNode.tagName && !/^body|html$/i.test(parentNode.tagName) )
{
// work around opera inline/table scrollLeft/Top bug
if (parentNode.style['display'].search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
}
}
/**
* Returns the left scroll value of the document
* @method getDocumentScrollLeft
* @param {HTMLDocument} document (optional) The document to get the scroll value of
* @return {Int} The amount that the document is scrolled to the left
*/
getDocumentScrollLeft = function(doc) {
doc = doc || document;
return Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
},
/**
* Returns the top scroll value of the document
* @method getDocumentScrollTop
* @param {HTMLDocument} document (optional) The document to get the scroll value of
* @return {Int} The amount that the document is scrolled to the top
*/
getDocumentScrollTop = function(doc) {
doc = doc || document;
return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}
下面是精简版:
function getX(obj){
return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);
}
function getY(obj){
return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);
}
不过只支持IE和FF
分享到:
相关推荐
通过`findPosX`和`findPosY`函数,我们能够准确地获取页面上任何元素的X、Y坐标,这对于实现诸如拖放操作、弹出菜单定位等功能至关重要。然而,值得注意的是,由于`offsetLeft`和`offsetTop`的计算方式,这些函数在...
JavaScript DOM元素拖动技术是网页交互中的重要组成部分,它允许用户通过鼠标操作页面上的元素,实现元素的自由移动。在本资源"js实现网页上dom元素拖动 并实时显示坐标效果.rar"中,包含了多个关于DOM元素拖动的...
### JavaScript跟随鼠标X,Y坐标移动的文字效果解析 #### 一、功能概述 在网页开发中,有时为了增强用户体验或实现特定的视觉效果,开发者会利用JavaScript来制作一些动态交互元素。其中一种常见的特效就是让页面上...
这个函数是用于同时获取元素的 X 轴和 Y 轴坐标的。它通过遍历元素及其父级元素的偏移量来计算最终的坐标值。 ```javascript function findPos(obj) { var curleft = 0; var curtop = 0; if (obj.offsetParent) ...
本文将详细介绍如何使用JavaScript来获取DOM元素的X(横坐标)和Y(纵坐标)位置。 #### 一、背景介绍 在Web开发中,DOM(Document Object Model)模型提供了访问和操作HTML文档的标准方法。通过DOM,开发者可以...
这里,我们首先通过`getBoundingClientRect()`获取目标元素的大小和位置,然后从鼠标坐标中减去元素的位置,得到相对于元素的坐标。 ### 补充知识点 - `event`对象:在JavaScript事件处理函数中,浏览器自动传递的...
当DOM元素的中心坐标在显示窗口的顶部和底部坐标范围内,即元素的中心坐标X和Y都位于窗口顶部和底部坐标之间时,可以判断该DOM元素处于可视区域内。 ### 知识点二:具体实现方法 有了上述的理论基础后,我们可以...
函数返回一个对象,其中包含了六个属性,分别是:元素自身的宽度(`width`),元素自身的高度(`height`),元素相对于页面(或父元素)左边界的坐标(`x`或`left`),元素相对于页面(或父元素)上边界的坐标(`y`...
例如,要画一个圆,可以使用`arc()`方法,它接受中心点的x、y坐标,半径,起始角度,结束角度(以弧度计),以及一个布尔值决定是否填充圆。 对于简单函数的实现,可能涉及到数学公式或者数据点的映射到Canvas坐标...
这里通过`getElementById`方法获取ID为`xxx`和`yyy`的输入框元素,并分别设置它们的`value`属性为当前的`x`和`y`坐标值。 #### 结论 通过以上步骤,我们可以实现在网页上实时显示鼠标位置的功能。这不仅加深了我们...
在JavaScript中,获取页面元素的位置坐标是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)的操作。本文将详细讲解如何使用JavaScript的内置属性和方法来获取对象在页面中的位置坐标。 首先,我们需要理解两...
首先,元素的绝对位置是指元素左上角相对于浏览器窗口的X和Y坐标。这不包括任何滚动偏移,它是元素在页面完全加载后,不考虑CSS相对定位或绝对定位时的位置。在JavaScript中,有两个主要的方法可以用来获取这些信息...
通过以上的计算,`mousePos`函数最终返回一个对象,其中包含了两个属性:`x`和`y`,分别表示鼠标在页面中的水平和垂直坐标。该函数设计为可以与`onmousemove`事件一起使用,意味着每当用户移动鼠标时,都会触发`...
### JavaScript常用函数列表详解 #### 一、点击与关闭事件 - `click()`: 这个函数用于模拟点击事件,通常在DOM元素上绑定点击事件处理函数时使用。 - `closed()`: 检测浏览器窗口是否已关闭,返回`true`或`false`...
在JavaScript中,理解和操作元素的尺寸与坐标是实现动态布局、动画效果以及用户交互的关键技能。以下是对这一主题的详细阐述: 1. **DOM元素的尺寸** - `offsetWidth` 和 `offsetHeight`: 这两个属性返回元素的总...
这个项目可能是一个简单的JavaScript(JS)特效,用于教育开发者如何利用JavaScript监听和处理鼠标移动事件,以展示鼠标的X和Y坐标。 首先,"JS特效-鼠标特效"这一标签暗示了我们将在HTML文档中使用JavaScript来...
JavaScript提供了一种有效的方法来获取DOM元素在页面上的精确坐标,这在创建复杂的用户界面和动画时非常有用。 DOM元素的绝对位置指的是元素左上角相对于浏览器窗口的像素位置,包括了元素自身的边距、边框和内填充...
- **XY坐标**: 在二维平面中,通过X轴和Y轴来定位一个点的位置。 #### 实现方法 - **JavaScript**: 使用JavaScript来编写逻辑处理代码,实现鼠标移动时坐标值的获取与显示。 - **AJAX**: 异步JavaScript和XML技术,...
2. **`elementFromPoint()` 方法**:这是一个非常有用的API,它接受两个参数(即鼠标光标的x和y坐标),返回位于该坐标的文档元素。如果找不到任何元素,则返回`null`。 3. **`event.clientX` 和 `event.clientY`**...
一个 JavaScript 书签,用于返回在 DOM 上单击的点的坐标。 当在页面上单击书签时,clickAndPoint 将立即运行,您可以看到您的点击位置打印到控制台。 以下选项可用,可以通过将它们作为对象传递来设置,例如在...