谷歌浏览器控制台获取元素坐标方法实例
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) // 元素底