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. wordpress 插件 之 微信自动回复机器人

    微信目前越来越火,wordpress 也拥有众多用户 那我们来写个插件,把两者连起来吧! 目前已经测试完成,下面把相关的信息分享一下. 查看演示 请加我微信公众号 创新实验室,或直接扫描最底下的二维码 ...

  2. 用聚合数据API(苏州实时公交API)快速写出小程序

    利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如“苏州实时公交”小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www ...

  3. ajax乱码解决总结

    第一,javascript沿用java的字符处理方式,内部是使用unicode来处理所有字符的,第二,utf-8是每个汉字(unicode字符)用3个字节来存储.第三,用utf-8来send数据是不会 ...

  4. pngCanvas 是一个使用纯Python代码的生成png图像的工具

    #!/usr/bin/env python """Simple PNG Canvas for Python - updated for bytearray()" ...

  5. 用户自定义类型《lua程序设计》 28章 笔记

    本实例实现一种很简单的类型------布尔数组.C语言可以实现将每个布尔值存储在一个bit中,从而减少内存用量. 必须的一些宏 Code Snippet #defineBITS_PER_WORD (C ...

  6. linux 设置tomcat快捷启动方式

    在linux下搭建好tomcat之后,每次启动和关闭都要去tomcat的bin目录下执行./startup.sh和./shutdown.sh 这是很不方便的,下面介绍如何像执行ls mv cp等命令一 ...

  7. 谈谈varnish,squid,apache,nginx缓存的对比

    总是有人在问cache用什么,有varnish,squid,apache,nginx这几种,到底是我们用什么架构cache. 1.从这些功能上.varnish和squid是专业的cache服务,而ap ...

  8. ubuntu 12.04上安装sougou输入法

    1.卸载ibus sudo apt-get install ibus 2.添加源 sudo add-apt-repository ppa:fcitx-team/nightly 3.更新源 sudo a ...

  9. WCF信道工厂Channel Factory

    ChannelFactory<TChannel> 类 一个创建不同类型通道的工厂,客户端使用这些通道将消息发送到不同配置的服务终结点. 命名空间: System.ServiceModel ...

  10. strust2 和 hibernate的整合------登录的实现

    初步认识了struts2,并与hibernate进行整合,完成了一个登录的案例,下面贴源码 1.实体类User public class User { private Integer id; priv ...