javascript中获取容器对象(div)位置信息-自学php网

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

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 我们经常会看到很多相对定位的东西，下面我来给大家介绍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 .

Javascript中encodeURI与encodeURIComponent区别

怎么删除CKEditor编辑器不要的工具

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论