获取控件在网页中的绝对位置

最新推荐文章于 2021-12-15 07:00:00 发布

SiC 软件

最新推荐文章于 2021-12-15 07:00:00 发布

阅读量994

点赞数

分类专栏： F# JavaScript IE XHTML HTML

本文链接：https://blog.csdn.net/elf8848/article/details/39926071

版权

JavaScript 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

在IE和FF下能用的，获取按钮在网页中的绝对位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取控件在网页中的绝对位置</title>
</head>
<body>
<div>如果您没有看到按钮，请往下拉到滚动条。</div>
<div style="height:500px;border:1px solid #6666CC;">　</div>
------------<input type="button" value="点我获取我的座标" 
οnclick="javascript:var pos = getCoordinate();alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');" />

<script type="text/javascript" language="javascript">
function CPos(x, y)
{
    this.x = x;
    this.y = y;
}

// 取得事件（通用）
function $EVENTObject()
{
	if(window.event) return window.event;
    var f=$EVENTObject.caller;
    while(f!=null)
    {
        var e = f.arguments[0];
        if(e && (e.constructor==MouseEvent||e.constructor==Event||e.constructor==KeyboardEvent)) return e;
        f=f.caller;
    }
}

//取得触发本事件的元素（通用）
function getElement()
{
	var _enent=$EVENTObject(); 
	if(window.event)
	{
		return _enent.srcElement;  //是IE 
	}else{
		return _enent.target;  //是FF
	}

}

//取得 调用本方法的按钮  距离页面最上端和最左端的位置
function getCoordinate()
{
    var target =getElement();
    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;
}
</script>
</body>
</html>