`
sigh0829
  • 浏览: 5378 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

获取元素相的坐标

 
阅读更多
所有现代浏览器均支持以下3个属性:offsetParent,offsetLeft,offsetTop
不同点在于有的浏览器的offsetParent是直接指向根节点的,有的不是
function pageX(elem){
        //查看是否位于根元素
	return elem.offsetParent?elem.offsetLeft + pageX(elem.offsetParent):elem.offsetLeft;
}

function pageY(elem){
	return elem.offsetParent?elem.offsetTop + pageY(elem.offsetParent):elem.offsetTop;
}


获取相对于父元素的位置
function parentX(elem){
	return elem.parentNode == elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}

function parentY(elem){
	return elem.parentNode == elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}



获取相对于CSS容器的位置
function cssX(elem){
	return parseInt(getStyle(elem,"left"));
}
function cssY(elem){
	return parseInt(getStyle(elem,"top"));
}


获取隐藏元素的高度
//获取隐藏元素的高度和宽度
	function fullHeight(elem) {
		if(getStyle(elem,"display") != "none") {
			return elem.offsetHeight || getHeight(elem);
		}
		var old = resetCss(elem, {
			display:"",
			visibility:"hidden",
			position:"absolute"
		});
		var h = elem.offsetHeight || getHeight(elem);
		restoreCss(elem,old);
		return h;
	}

	function resetCss(elem,prop) {
		var old = {};
		for(var i in prop) {
			old[i] = elem.style[i];
			elem.style[i] = prop[i];
		}
		return old;
	}

	function restoreCss(elem,old) {
		for(var i in prop) {
			elem.style[i] = old[i];
		}
	}
分享到:
评论

相关推荐

    js获取页面控件坐标.pdf

    在 JavaScript 中,我们可以使用多种方法来获取元素的坐标,例如使用 getBoundingClientRect() 方法可以获取元素相对于视窗的坐标,而使用 getComputedStyle() 方法可以获取元素的样式信息,包括其坐标信息。...

    获取元素绝对位置 position

    "获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,并参考提供的博客链接以及相关的HTML文件。 首先,元素的绝对位置是指元素左上角相...

    (彬)泪闯天涯-取网页元素坐标

    了解了获取元素坐标的方法后,我们来看看这些坐标在实际中的应用。网页元素的坐标信息在以下场景尤其重要: 1. **模拟点击**:在自动化测试或模拟用户行为时,可能需要根据元素坐标进行精确的点击操作。 2. **可视...

    C# WPF获取相对坐标

    在WPF中,我们可以获取到子控件相对于其父控件的位置坐标。 #### 四、代码解析与实现方法 ##### 1. XAML定义网格布局 在XAML中定义了一个`Grid`作为父控件,并设置了背景图像。此外,还定义了多个`Button`控件...

    js实现获取div坐标的方法

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

    获取鼠标当前坐标

    获取鼠标在当前屏幕坐标系中的位置信息 将鼠标移动到要获取位置的点,然后按F10,就会弹出当前的坐标值

    jQuery 获得控件的坐标位置

    本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动条的位置。 #### 一、`offset()` 方法 `offset()` 方法用于获取元素相对于文档的当前位置(不包括边界)。它返回一个对象,包含两个属性:`top` 和 `...

    js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    为了实现这一点,JavaScript提供了多种方法来获取元素相对于文档顶部的位置,具体来讲就是获取元素的横向和纵向坐标。文章总结了两种常用方法,分别是通过offsetParent属性和getBoundingClientRect()方法。 首先,...

    获取CAD坐标

    在CAD中,坐标可以通过绝对坐标(相对于图纸原点)或相对坐标(相对于当前点)来指定。 要获取CAD坐标,你需要打开相应的CAD文件,如DWG或DXF格式。然后,可以使用以下几种方法: 1. **选择对象并查看属性**:在...

    c# 获取全局的鼠标坐标

    此外,如果你正在使用WPF(Windows Presentation Foundation)框架,还可以利用`MouseDevice`类的静态方法`GetPosition`获取鼠标位置,但请注意,这个方法返回的是相对于指定UI元素的坐标,而不是屏幕坐标。要获取...

    javascript获得对象的坐标

    虽然 `getBoundingClientRect()` 是获取元素坐标的首选方法,但在某些情况下可能需要使用 `offsetTop` 和 `offsetLeft` 来获取元素相对于其最近的已定位祖先元素的位置。 ```javascript function getOffset...

    vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    在Vue.js开发中,有时我们需要获取元素的宽度、高度、相对于屏幕或父元素的位置等信息。这通常是通过JavaScript原生的DOM操作实现的,而Vue提供了`$refs`机制来方便地引用Vue实例中的DOM元素。本文将详细介绍如何在...

    C#获取鼠标坐标源码

    `GetPosition`方法用于获取鼠标相对于指定元素的位置。 总结来说,无论在Windows Forms还是WPF中,获取鼠标坐标都是通过处理鼠标事件并调用相应的API来完成的。开发者可以根据实际需求选择合适的框架和事件来实现这...

    Javascript获取鼠标坐标的各种类型

    对于HTML控件的坐标,我们可以使用`offsetTop`和`offsetLeft`来获取一个元素相对于其最近的定位父元素(或`offsetParent`属性指定的父元素)的顶部和左侧距离。这些属性只读,不接受赋值。同时,`offsetWidth`和`...

    yantubbs-获取坐标

    - API调用:许多库和框架提供API来获取元素坐标,例如在Web开发中,JavaScript的getBoundingClientRect()方法可以获取HTML元素相对于视口的位置。 - 图像处理:通过像素坐标来定位图像中的特定区域,如OpenCV库...

    jquery中获得元素尺寸和坐标的方法整理

    offset()方法用于获取或设置元素相对于文档的位置(即视口坐标)。此方法仅对当前文档中可见的元素有效。使用此方法可以获取一个包含top和left属性的对象,这两个属性表示元素的坐标位置,单位为像素。例如,使用...

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

    为了显示鼠标的位置坐标,我们需要获取页面中的输入框元素,并将其`value`属性设置为当前的坐标值。 ```javascript function mouseMove(ev) { Ev = ev || window.event; var mousePos = mouseCoords(ev); ...

    Vue获取页面元素的相对位置的方法示例

    在给定的示例中,开发者想要获取元素相对于文档顶部的位置,以便在滚动时将其固定在头部。这时,单纯使用`getBoundingClientRect().top`可能无法满足需求,因为它只提供元素距离视口顶部的距离。因此,开发者使用了`...

    JQuery获取鼠标坐标

    在IT领域,特别是前端开发中,获取鼠标坐标是一项基本但重要的功能,它广泛应用于各种交互设计、游戏开发、数据采集等场景。通过JQuery或原生JavaScript,开发者可以轻松实现这一功能,为用户提供更加丰富和动态的...

    javascript获取对象的绝对坐标

    在网页开发中,有时我们需要知道一个元素在其父级容器中的绝对位置,即该元素相对于页面左上角的坐标(X轴和Y轴的位置)。这对于实现某些动态效果或者交互功能非常重要。JavaScript 提供了多种方法来获取元素的位置...

Global site tag (gtag.js) - Google Analytics