封装 获取选择元素距离窗口的坐标并详解getBoundingClientRect

 封装了一个方法，只需要将想要知道的元素的坐标的那个元素传进去即可

const dom = $('.dom').get(0)

function captchaGraph(cuftitleDiv) {

        if(!cuftitleDiv){

            cuftitleDiv = $('#rclBtnDiv').find('button:contains("审核通过")').get(0);

        }else if(cuftitleDiv instanceof jQuery){  //如果是jquery对象的话转换为DOM对象

            cuftitleDiv = cuftitleDiv.get(0);

        }

        if(cuftitleDiv){

            const top = cuftitleDiv.getBoundingClientRect().top;

            const left = cuftitleDiv.getBoundingClientRect().left;

            const bottom = cuftitleDiv.getBoundingClientRect().bottom;

            const right = cuftitleDiv.getBoundingClientRect().right;

            const coordinateLeftTop = {x: left, y: top};

            const coordinateLeftBottom = {x: left, y: bottom};

            const coordinateRightTop = {x: right, y: top};

            const coordinateRightBottom = {x: right, y: bottom};

            console.log('captchaGraph -> #90', {coordinateLeftTop, coordinateLeftBottom, coordinateRightTop, coordinateRightBottom});

        }else{

            console.log('DOM 对象不存在 -> #92', {cuftitleDiv});

            return null;

        }

    }

使用：

const cuftitleDiv= $('.dom').get(0)
captchaGraph(cuftitleDiv);

详解一下getBoundingClientRect

语法： const rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。该对象有6个属性：top,lef,right,bottom,width,height；

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

var box=document.getElementById('box');        // 获取元素

alert(box.getBoundingClientRect().top);        // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);      // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0，IE为2

document.documentElement.clientLeft; // 非IE为0，IE为2

functiong getRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top    :  rect.top - top,

        bottom :  rect.bottom - top,

        left  :  rect.left - left,

        right  :  rect.right - left

    }

}