网站地图    收藏   

主页 > 前端 > javascript >

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 .

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论