js如何获取某个html元素的x y坐标

标签: javascrpt坐标   时间:2017-11-04
在网站前端开发过程中,我们有时候需要获取某一个元素的x y坐标,一般我们都是使用js方法来获取的,本文章将向大家分享几种获取html元素的x y坐标的方法,需要的朋友可以参考一下。

js获取某个html元素的x y坐标,方法如下:

 

第一种方法:使用js的getBoundingClientRect()方法

代码:

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: el.left + window.scrollX,
    top: el.top + window.scrollY
  }
}

 

第二种方法:使用offsetLeft 和offsetTop 

代码如下:

var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

原文地址:http://www.manongjc.com/article/2211.html