获得当前元素的绝对位值

最新推荐文章于 2024-09-14 08:45:16 发布

qiejinxing

最新推荐文章于 2024-09-14 08:45:16 发布

阅读量364

点赞数

文章标签： function button firefox opera null object

本文链接：https://blog.csdn.net/qiejinxing/article/details/1782560

版权

自己抄别人的

在网页设计中经常要得到元素的绝对位值，以便让自己弹出的层不在页面上变形。所以我们要得到点击元素的绝对坐标。在看阿里的js的时候，看到一个，能支持三种浏览器，所以在下边贴以下：
调用的方法很简单：
<input type="button" οnclick="Show(this)" id="Button2" value="clickMe" /><br />

< script type = " text/javascript " >
     function Show(checkEl)
    {
         document.getElementById( " tishiDiv " ).style.display = " block " ;
      document.getElementById( " tishiDiv " ).style.position = " absolute " ;
      document.getElementById( " tishiDiv " ).style.top = getXY(checkEl)[ 1 ] + 12 + " px " ;
      document.getElementById( " tishiDiv " ).style.left = getXY(checkEl)[ 0 ] - 10 + " px " ;

    }
     /* *
* 获取对象el的X,Y坐标
* @param {Object} el
*/
function getXY(el){
   var pos;
   if ( this .getExplorerType() == 1 ){
     var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
     var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    pos = [el.getBoundingClientRect().left + scrollLeft, el.getBoundingClientRect().top + scrollTop];
  } else {
    pos = [el.offsetLeft, el.offsetTop];
     var parentNode = el.offsetParent;
     if (parentNode != el) {
       while (parentNode) {
        pos[ 0 ] += parentNode.offsetLeft;
        pos[ 1 ] += parentNode.offsetTop;
        parentNode = parentNode.offsetParent;
      }
    }
     if (el.parentNode) { parentNode = el.parentNode; }
     else { parentNode = null ; }

     while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML'){
       if (parentNode.style.display != 'inline') {
        pos[ 0 ] -= parentNode.scrollLeft;
        pos[ 1 ] -= parentNode.scrollTop;
      }

       if (parentNode.parentNode) {
        parentNode = parentNode.parentNode;
      } else { parentNode = null ; }
    }
  }
   return pos;
}
function getExplorerType(){
   var ua = navigator.userAgent.toLowerCase();
   if (window.ActiveXObject){
     return 1 ;
  } else if ((ua.indexOf('firefox') >- 1 )){
     return 2 ;
  } else if ((ua.indexOf('opera') >- 1 )){
     return 3 ;
  }
}
     </ script >