`

javascript获得DOM元素X,Y坐标的函数

阅读更多

以下是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

分享到:
评论

相关推荐

    js获得对象的x,y位置函数

    通过`findPosX`和`findPosY`函数,我们能够准确地获取页面上任何元素的X、Y坐标,这对于实现诸如拖放操作、弹出菜单定位等功能至关重要。然而,值得注意的是,由于`offsetLeft`和`offsetTop`的计算方式,这些函数在...

    js实现网页上dom元素拖动 并实时显示坐标效果.rar

    JavaScript DOM元素拖动技术是网页交互中的重要组成部分,它允许用户通过鼠标操作页面上的元素,实现元素的自由移动。在本资源"js实现网页上dom元素拖动 并实时显示坐标效果.rar"中,包含了多个关于DOM元素拖动的...

    javascript跟随鼠标x,y坐标移动的字效果

    ### JavaScript跟随鼠标X,Y坐标移动的文字效果解析 #### 一、功能概述 在网页开发中,有时为了增强用户体验或实现特定的视觉效果,开发者会利用JavaScript来制作一些动态交互元素。其中一种常见的特效就是让页面上...

    javascript获取对象的绝对坐标

    这个函数是用于同时获取元素的 X 轴和 Y 轴坐标的。它通过遍历元素及其父级元素的偏移量来计算最终的坐标值。 ```javascript function findPos(obj) { var curleft = 0; var curtop = 0; if (obj.offsetParent) ...

    获得对象的x,y位置

    本文将详细介绍如何使用JavaScript来获取DOM元素的X(横坐标)和Y(纵坐标)位置。 #### 一、背景介绍 在Web开发中,DOM(Document Object Model)模型提供了访问和操作HTML文档的标准方法。通过DOM,开发者可以...

    javascript获得鼠标的坐标值

    这里,我们首先通过`getBoundingClientRect()`获取目标元素的大小和位置,然后从鼠标坐标中减去元素的位置,得到相对于元素的坐标。 ### 补充知识点 - `event`对象:在JavaScript事件处理函数中,浏览器自动传递的...

    JS判断指定dom元素是否在屏幕内的方法实例

    当DOM元素的中心坐标在显示窗口的顶部和底部坐标范围内,即元素的中心坐标X和Y都位于窗口顶部和底部坐标之间时,可以判断该DOM元素处于可视区域内。 ### 知识点二:具体实现方法 有了上述的理论基础后,我们可以...

    js实现获取div坐标的方法

    函数返回一个对象,其中包含了六个属性,分别是:元素自身的宽度(`width`),元素自身的高度(`height`),元素相对于页面(或父元素)左边界的坐标(`x`或`left`),元素相对于页面(或父元素)上边界的坐标(`y`...

    基于js的坐标轴画圆和简单函数的示例代码

    例如,要画一个圆,可以使用`arc()`方法,它接受中心点的x、y坐标,半径,起始角度,结束角度(以弧度计),以及一个布尔值决定是否填充圆。 对于简单函数的实现,可能涉及到数学公式或者数据点的映射到Canvas坐标...

    javascript获取鼠标当前位置坐标并显示

    这里通过`getElementById`方法获取ID为`xxx`和`yyy`的输入框元素,并分别设置它们的`value`属性为当前的`x`和`y`坐标值。 #### 结论 通过以上步骤,我们可以实现在网页上实时显示鼠标位置的功能。这不仅加深了我们...

    JavaScript获取对象在页面中位置坐标的方法

    在JavaScript中,获取页面元素的位置坐标是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)的操作。本文将详细讲解如何使用JavaScript的内置属性和方法来获取对象在页面中的位置坐标。 首先,我们需要理解两...

    获取元素绝对位置 position

    首先,元素的绝对位置是指元素左上角相对于浏览器窗口的X和Y坐标。这不包括任何滚动偏移,它是元素在页面完全加载后,不考虑CSS相对定位或绝对定位时的位置。在JavaScript中,有两个主要的方法可以用来获取这些信息...

    JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)

    通过以上的计算,`mousePos`函数最终返回一个对象,其中包含了两个属性:`x`和`y`,分别表示鼠标在页面中的水平和垂直坐标。该函数设计为可以与`onmousemove`事件一起使用,意味着每当用户移动鼠标时,都会触发`...

    JavaScript常用函数列表

    ### JavaScript常用函数列表详解 #### 一、点击与关闭事件 - `click()`: 这个函数用于模拟点击事件,通常在DOM元素上绑定点击事件处理函数时使用。 - `closed()`: 检测浏览器窗口是否已关闭,返回`true`或`false`...

    JavaScript中尺寸、坐标

    在JavaScript中,理解和操作元素的尺寸与坐标是实现动态布局、动画效果以及用户交互的关键技能。以下是对这一主题的详细阐述: 1. **DOM元素的尺寸** - `offsetWidth` 和 `offsetHeight`: 这两个属性返回元素的总...

    显示鼠标坐标信息.rar

    这个项目可能是一个简单的JavaScript(JS)特效,用于教育开发者如何利用JavaScript监听和处理鼠标移动事件,以展示鼠标的X和Y坐标。 首先,"JS特效-鼠标特效"这一标签暗示了我们将在HTML文档中使用JavaScript来...

    DOM元素的绝对位置

    JavaScript提供了一种有效的方法来获取DOM元素在页面上的精确坐标,这在创建复杂的用户界面和动画时非常有用。 DOM元素的绝对位置指的是元素左上角相对于浏览器窗口的像素位置,包括了元素自身的边距、边框和内填充...

    随鼠标移动动态显示xy坐标

    - **XY坐标**: 在二维平面中,通过X轴和Y轴来定位一个点的位置。 #### 实现方法 - **JavaScript**: 使用JavaScript来编写逻辑处理代码,实现鼠标移动时坐标值的获取与显示。 - **AJAX**: 异步JavaScript和XML技术,...

    javascript获取鼠标点击元素对象(示例代码).docx

    2. **`elementFromPoint()` 方法**:这是一个非常有用的API,它接受两个参数(即鼠标光标的x和y坐标),返回位于该坐标的文档元素。如果找不到任何元素,则返回`null`。 3. **`event.clientX` 和 `event.clientY`**...

    clickAndPoint:返回在 DOM 上单击的点的坐标的 JavaScript 书签

    一个 JavaScript 书签,用于返回在 DOM 上单击的点的坐标。 当在页面上单击书签时,clickAndPoint 将立即运行,您可以看到您的点击位置打印到控制台。 以下选项可用,可以通过将它们作为对象传递来设置,例如在...

Global site tag (gtag.js) - Google Analytics