`
sigh0829
  • 浏览: 5121 次
  • 性别: 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];
		}
	}
分享到:
评论

相关推荐

    获取鼠标当前坐标

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

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

    一、获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。(即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计。 此方法只对可见元素有效。 2.position() position...

    jQuery 获得控件的坐标位置

    元素相当于窗口的左边的偏移量 元素相对于窗口的上边的偏移量 元素相对于滚动条左边的偏移量 元素相对于滚动条顶部的偏移量

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

    主要介绍了Vue获取页面元素的相对位置的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    js获取元素在浏览器中的绝对位置

    JavaScript中提供获取HTML元素位置的...那么如何得到一个HTML元素的绝对位置呢,可以用以下函数: 代码如下: //获取元素的纵坐标 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=ge

    js获取窗口相对于屏幕左边和上边的位置坐标

    获取窗口相对于屏幕左边和上边的位置: 代码如下: var x=window.screenLeft?window.screenLeft: window.screenX ; var y=window.screenTop?window.screenTop: window.screenY; alert(x+” “+y);

    解决C#获取鼠标相对当前窗口坐标的实现方法

    在C#winform中,可以用Control.MousePosition获得当前鼠标的坐标,使用PointToClient计算鼠标相对于某个控件的坐标,如下Point screenPoint = Control.MousePosition;//鼠标相对于屏幕左上角的坐标Point formPoint =...

    yxdYXD11123123#Frontend-Road#jQuery获取元素位置+尺寸1

    获取/设置标签的位置offset()相对于页面左上角的坐标注意:此方法只对可见元素有效参数带有 top 和 left 属性的对象获取匹配元素不包括边框,包括内边

    jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

    jQuery获得页面元素的绝对X,Y坐标,可以用offset()方法,下面有个不错的坐标大家可以参考下

    JavaScript与JQUERY获取元素的宽、高和位置

    ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中...

    jQuery获取页面元素绝对与相对位置的方法

    本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID')....//元素相对于滚动条左边的偏移量 var pTop

    Web前端开发技术-Jquery的尺寸和位置操作.pptx

    offset()方法:使用offset()方法可以获取元素的位置,返回的是一个对象,包含left和top属性,表示相对于文档的偏移坐标,和父级元素没有关系。;案例演示:;案例实现:;案例实现:获取元素的位置;position()方法:...

    Javascript中找到子元素在父元素内相对位置的代码

    因为想自动定位到子元素,所以一直在找各种找寻元素位置的代码。不过总是找不到可以定位子元素相对位置的代码

    基于JavaScript实现 获取鼠标点击位置坐标的方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊...

    【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx

    3、获取图片元素对象,将鼠标的 x , y 坐标 分别赋值给图片的 left , top 值,为了时鼠标在图片中间,可以减去图片宽高的一半,让图片位置向上向左,注意:不要忘记加上单位 ‘px'  小知识: e.clientX- - -获取...

    JS获取各种宽度、高度的简单介绍

    有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取...

    Web前端开发技术-元素偏移量offset应用.pptx

    offset含义:offset的含义是偏移量,使用offset的相关属性可以动态地获取该元素的位置、大小等。;获取鼠标位置:鼠标指针在盒子内的坐标位置示意图分析。;案例演示:获取鼠标指针在盒子内的坐标。;案例实现:获取...

    js Event对象的5种坐标

    使用鼠标事件经常碰到这样的需求,比如获取鼠标相对于事件源的位置,鼠标相对于事件源对象父元素的位置

    js实现鼠标拖拽效果

    鼠标相对于元素的坐标点(不计算边框 ) 事件对象.offsetX(水平方向) 事件对象.offsetY(垂直方向) 鼠标相对于元素的坐标点(计算边框 ) 事件对象.clientX; 事件对象.clientY; 元素可用区域的边缘到光标的位置 不...

    EXTJS总结.txt

    一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存...

Global site tag (gtag.js) - Google Analytics