Keep on going, never give up.

javascript获取容器对象的位置信息

在设计弹出菜单,或动态修改内容时,经常需要定位出当前或是某个控件的XY坐标,自己对Javascript也不太熟悉,每次用到也都是现查现用,本文就顺带整理一下,方便参考。当定位到某个object时,我们就可以获取到相当多的宽高属性,先看一下这些常见属性的图解。

一、相关对象的位置属性图解

如下图所示,注意途中前面的obj有些是body,有些是div。

 

图片来源:http://www.cnblogs.com/aissa/archive/2009/07/23/1529287.html

二、几个常用属性中文释义

Obj.offsetWidth —— 对象元素的绝对宽度、

Obj.offsetHeight —— 对象元素的绝对高度

clientHeight —— 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。

clientLeft —— 获取 offsetLeft 属性和客户区域的实际左边之间的距离。

clientTop —— 获取 offsetTop 属性和客户区域的实际顶端之间的距离。

clientWidth —— 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。

clientX —— 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY —— 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clip —— 设置或获取定位对象的哪个部分可见。

clipBottom —— 获取对象剪裁区域的底边坐标。

clipLeft —— 获取对象剪裁区域的左边坐标。

clipRight —— 获取对象剪裁区域的右边坐标。

clipTop —— 获取对象剪裁区域的顶边坐标。

参考:百度空间 由于上述属性需要在几乎所有的容器对象上给予支持,所以,只需弄清楚这些位置的信息意义即可,即可对对象进行取值操作。

三、JS获取位置示例代码

function CPos(x, y)
{
	this.x = x;
	this.y = y;
}
function getObjPos(obj)//获取控件的位置
{
	var target = obj;
	var pos = new CPos(target.offsetLeft,target.offsetTop);

	var target = target.offsetParent;
	while (target)
	{
		pos.x += target.offsetLeft;
		pos.y += target.offsetTop;
		
		target = target.offsetParent
	}
	
	return pos;
}

var mobj = ImObject;
//改变位置会改变CSS设置里的z-index ??需要重设
mobj.style.top = getObjPos(obj).y+obj.offsetHeight+"px";
mobj.style.left = getObjPos(obj).x+"px";
mobj.style.zIndex = 101;
mobj.style.display="block";

上面代码获取到当前控制的左上角位置信息,如果需要底部,则只需要加上Obj.offsetHeight即可。请注意文中的ImObject是显示菜单,obj是需要捕捉的坐标的对象,比如一个SPAN?,一个TD?...另一个菜单的CSS需提前设置(仅供参考):

#menu {    position:absolute;left:400px; top:150px; padding:5px 10px 15px 10px;border:1px solid #ECEFF5;box-shadow: 10px 10px 5px #888;z-index:101; background:#ECEFF5; text-align:center; line-height:25px;overflow:hidden;display:none;}

四、如何获取鼠标点击位置坐标

function getPageX(ev) {
    var x = ev.pageX;
    if (!x && 0 !== x) {
        x = ev.clientX || 0;
        if ( this.isIE ) {
			x += this._getScrollLeft();
        }
    }
    return x;
}

function getPageY(ev) {
    var y = ev.pageY;
    if (!y && 0 !== y) {
        y = ev.clientY || 0;
        if ( this.isIE ) {
			y += this._getScrollTop();
        }
    }
    return y;
}

var obj = ImObject;
//obj.style.position="absolute";
obj.style.top = getPageY(event)+'px';		
obj.style.left = getPageX(event)+'px';
obj.style.display = 'block';

文中的ImObject是菜单对象。CSS风格需提前设置,同上。

 

更多文章:

三款简单的JS返回页面顶部代码

Javascript的getYear、getFullYear、getUTCFullYear异同

用Javascript实现网页内容水平或垂直滚动

使用Javascript为网站增加日期时间展示

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.