谷歌浏览器控制台获取元素坐标方法实例

谷歌浏览器控制台获取元素坐标方法实例

1、以谷歌浏览器为例，找了好多实例但是没有找，琢磨了好几天终于找到答案，再次留下笔记；

2、打开谷歌浏览器，以bing为例，网址：http:cn.bing.com，打开控制台Console，比如我们想查看"国内版"标签在浏览器上面的相对坐标,右键检查“<div id="est_cn" class="est_selected">国内版</div>”，“国内版”标签的id为“est_cn”;

3、那么我们就用以下代码：

function getRect(elements) {
    var rect = elements.getBoundingClientRect();
    w = rect.width || rect.right - rect.left;
    h = rect.height || rect.bottom - rect.top;
    ww = document.documentElement.clientWidth; //浏览器可见宽
    hh = document.documentElement.clientHeight; //浏览器可见高
    return { // 兼容ie多出的两个px
        top: Math.floor(rect.top), // 元素顶边到浏览器底边距离
        bottom: Math.floor(hh - rect.bottom), // 元素底边到浏览器底边距离
        left: Math.floor(rect.left), // 元素左边到浏览器底边距离
        right: Math.floor(ww - rect.right) // 元素底