function findPosition(oElement) {
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
//return [ posX, posY ,x2, y2];
return { x: posX, y: posY, xx: x2, yy: y2 };
} else {
x2 = oElement.x + width;
y2 = oElement.y + height;
return { x: oElement.x, y: oElement.y, xx: x2, yy: y2 };
}
}

  此方法获取到的是json格式的数据,包括元素左上角的坐标和元素的宽高。

获取html元素所在页面的坐标的更多相关文章

  1. 获取DOM元素到页面顶部的距离,亲测有效版本(转载)

    原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...

  2. jquery获取当前鼠标所在位置的坐标

    $(document).ready(function(){ $(document).mousemove(function(e){ $('#xy').html("X :"+e.pag ...

  3. js 获取元素在页面上的偏移量的最佳方式

    使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...

  4. 我的前端工具集(八)获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  5. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  6. js获取元素的页面坐标

    一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...

  7. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  8. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  9. jquery获取当前元素坐标

    1. jquery获取当前元素坐标 A) 获取对象

随机推荐

  1. Cocos2d-x 3.0中 物理碰撞检測中onContactBegin回调函数不响应问题

    好吧,事实上这篇也是暂时冒出来的,近期朋友要做个物理游戏,曾经做物理还是用box2d,呃.确实要花些功夫才干搞懂当中的精髓,可是听讲这套引擎又一次封装了一次.要easy非常多,所以就简单尝试了一下,感 ...

  2. axios 取消请求

    解决思路 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. axios官方文档取消请求说明 方法一: const CancelTok ...

  3. 【分享】Nginx日志分析(上)

    在很多时候,我们会非常关注网站的访问量,比如网站的日PV是多少.网站某个功能上线之后点击量是多少,像这些东西都是需要从web容器中的访问日志统计出来的,下面我们看一下如何在nginx中统计网站的访问信 ...

  4. iOS 自定义转场动画浅谈

    代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...

  5. 使用Nginx的proxy_cache缓存功能取代Squid(转)

    Nginx从0.7.48版本开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当作Key,用md5编码哈希后保存在硬盘上,所以它可以支持任意URL链接,同时也支持404/301/302 ...

  6. Atitit.数据库表的物理存储结构原理与架构设计与实践

    Atitit.数据库表的物理存储结构原理与架构设计与实践 1. Oracle和DB2数据库的存储模型如图: 1 1.1. 2. 表数据在块中的存储以及RowId信息3 2. 数据表的物理存储结构 自然 ...

  7. 微信小程序下拉按钮动画

    有些时候要求下拉按钮需要动画效果,但又不需要引入插件. 这时需要手动写一个动画. 主要思路: 动态切换class 默认与动画转向的样式编写 上图是默认给出的按钮向下的样式, 上图是动画转向后的样式 上 ...

  8. Unity3D - 发布Android游戏

    本文将介绍如何使用Unity3D来发布Android游戏,这里我使用的Unity3D版本为4.6.3f1 下载Java SDK 使用Unity3D来发布Android游戏时需要用到Android SD ...

  9. Chrome插件开发之manifest.json

    广而告之: Chrome插件之一键保存网页为PDF1.1发布 http://www.cnblogs.com/bdstjk/p/3179543.html 最近做“一键保存网页为PDF”过程中,对Chro ...

  10. Vsphere笔记06 Vcenter 部署流程 1

    Vcenter 部署流程 1   一.环境需求   1.需要两台装着WIN2K8 R2 64X的服务器   2.启用一台要添加活动目录角色,并且配置DC,DC的参数如下: 域名:justech-dc. ...