javascript中获取容器对象(div)位置信息

例

 代码如下 复制代码

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';

常用属性中文释义
Obj.offsetWidth —— 对象元素的绝对宽度、

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

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

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

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

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

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

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

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

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

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

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

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

Javascript获取屏幕、窗口大小方法：
 

屏幕分辨率的高：window.screen.height ;
 

屏幕分辨率的宽：window.screen.width ;

屏幕可用工作区高度（不包含任务栏）：window.screen.availHeight ;
 

屏幕可用工作区宽度（不包含任务栏）：window.screen.availWidth;
 

网页可见区域宽（不包含滚动条和边框）：document.body.clientWidth ;
 

网页可见区域高（不包含滚动条和边框）：document.body.clientHeight;
 

网页可见区域宽（包含滚动条和边框）：document.body.offsetWidth ;
 

网页可见区域高（包含滚动条和边框）：document.body.offsetHeight ;
 

网页正文宽：document.body.scrollWidth ;
 

网页正文高：document.body.scrollHeight ;

网页被卷去的高：document.body.scrollTop ;

网页被卷去的左：document.body.scrollLeft ;

 
网页正文部分上（网页正文最左边距离屏幕左边缘的距离）：window.screenTop ;
 

网页正文部分左（网页正文最上边距离屏幕上边缘的距离）：window.screenLeft .

时间： 2024-07-30 09:33:50

javascript中获取容器对象(div)位置信息的相关文章

javascript中获取选中对象的类型_javascript技巧

在Javascript中 利用 document.selection 可以创建 textRange. 但其实不是什么时候都可以创建的. 我们可以利用 document.selection.type 来判断当前选中的是文本还是对象. document.selection.type 返回三个值 "None" "Text" "Control" 只有当返回值是 Text 时,创建的textRange才是有效的.

JavaScript中获取未知对象属性的代码_javascript技巧

这两天尝试写个AjaxToolkit:AsyncFileUpload的Demo, 它有个OnClientUploadComplete属性可以关联客户端JS, 于是可以写OnClientUploadComplete="uploadComplete", 然后定义uploadComplete方法: 复制代码 代码如下: function uploadComplete(sender, e) { //Do something here... } 但是, 怎么从e获得上传文件的信息呢? 除了看Aj

Javascript中获取对象的原型对象的方法小结_javascript技巧

在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码 代码如下: <!-- lang: js --> function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro

js中获取事件对象的方法小结_javascript技巧

复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的

浅谈JavaScript中的String对象常用方法

这篇文章主要介绍了JavaScript中的String对象常用方法,非常简单实用,有需要的小伙伴参考下 String对象提供的方法用于处理字符串及字符. 常用的一些方法: charAt(index):返回字符串中index处的字符. indexOf(searchValue,[fromIndex]):该方法在字符串中寻找第一次出现的searchValue.如果给定了fromIndex,则从字符串内该位置开始搜索,当searchValue找到后,返回该串第一个字符的位置. lastIndexOf(s

JavaScript中的Array 对象（数组对象）_javascript技巧

 1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&

javascript中获取元素标签中间的内容的实现方法_javascript技巧

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

如何在 Windows Phone 8 中获取手机的当前位置

原文  如何在 Windows Phone 8 中获取手机的当前位置 适用于:仅限于 Windows Phone 8. 本主题演示如何使用 Windows Phone 位置 API 确定手机的当前位置.如果您的应用仅需要用户当时的位置,例如,记录某位置的用户,或进行基于位置的搜索,则这是用于获取位置的建议方法.相比使用持续跟踪,此方法对于手机电池寿命更为有利.如果您确实需要持续更新位置,请参见如何在 Windows Phone 8 中持续跟踪手机位置. 重要说明: 您必须在您的应用清单文件中包含

Javascript中的String对象详谈

 这篇文章主要介绍了Javascript中的String对象,需要的朋友可以参考下 Sting字符串对象是Javascript提供的内建对象之一.    这里特别注意,字符串中的第一个字符是第0位的,第二个才是第1位的.    1.创建一个字符串对象的方法    [var] String 对象实例名 = new String(string)    或者是var String 对象实例名 = 字符串值    例子:    var str = "Hello World";    var s