夏日博客

A-A+

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

2016年10月17日 前端设计 暂无评论 阅读 6 views 次

我们经常会看到很多相对定位的东西,下面我来给大家介绍javascript中获取容器对象(div)位置信息方法,此方法可以解决相对定位哦,有需要了解的朋友可参考.

例,代码如下:

  1. function CPos(x, y)  
  2. {  
  3.  this.x = x;  
  4.  this.y = y;  
  5. }  
  6. function getObjPos(obj)//获取控件的位置  
  7. {  
  8.  var target = obj;  
  9.  var pos = new CPos(target.offsetLeft,target.offsetTop);  
  10.  var target = target.offsetParent;  
  11.  while (target)  
  12.  {  
  13.   pos.x += target.offsetLeft;  
  14.   pos.y += target.offsetTop;  
  15.     
  16.   target = target.offsetParent  
  17.  }  
  18.    
  19.  return pos;  
  20. }  
  21. var mobj = ImObject;  
  22. //改变位置会改变CSS设置里的z-index ？？需要重设  
  23. mobj.style.top = getObjPos(obj).y+obj.offsetHeight+"px";  
  24. mobj.style.left = getObjPos(obj).x+"px";  
  25. mobj.style.zIndex = 101;  
  26. mobj.style.display="block";  

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

  1. #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;}  

四、如何获取鼠标点击位置坐标,代码如下:

  1. function getPageX(ev) {  
  2.     var x = ev.pageX;  
  3.     if (!x && 0 !== x) {  
  4.         x = ev.clientX || 0;  
  5.         if ( this.isIE ) {  
  6.    x += this._getScrollLeft();  
  7.         }  
  8.     }  
  9.     return x;  
  10. }  
  11. function getPageY(ev) {  
  12.     var y = ev.pageY;  
  13.     if (!y && 0 !== y) {  
  14.         y = ev.clientY || 0;  
  15.         if ( this.isIE ) {  
  16.    y += this._getScrollTop();  
  17.         }  
  18.     }  
  19.     return y;  
  20. }  
  21. var obj = ImObject;  
  22. //obj.style.position="absolute";  
  23. obj.style.top = getPageY(event)+'px';    
  24. obj.style.left = getPageX(event)+'px';  
  25. 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 .

标签：

给我留言