<html>

<head>

    <title>位置</title>

    <style>

        .test {

            background: url("image/omeoclickimg.jpg");

        }

    </style>

    <script language="javascript" type="text/javascript">

        function c() {

            var objTop = getOffsetTop(document.getElementById("d"));//对象x位置

            var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置

            var mouseX = event.clientX + document.body.scrollLeft;//鼠标x位置

            var mouseY = event.clientY + document.body.scrollTop;//鼠标y位置

//计算点击的相对位置

            var objX = mouseX - objLeft;

            var objY = mouseY - objTop;

            clickObjPosition = objX + "," + objY;

            alert(clickObjPosition);

        }

        function getOffsetTop(obj) {

            var tmp = obj.offsetTop;

            var val = obj.offsetParent;

            while (val != null) {

                tmp += val.offsetTop;

                val = val.offsetParent;

            }

            return tmp;

        }

        function getOffsetLeft(obj) {

            var tmp = obj.offsetLeft;

            var val = obj.offsetParent;

            while (val != null) {

                tmp += val.offsetLeft;

                val = val.offsetParent;

            }

            return tmp;

        }

    </script>

</head>

<body style="margin:0px;">

<div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"></div>

<div id="area"></div>

<div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;">

    <div id="d" class="test" style="width:230px;height:230px;border:1px solid green;padding:10px;cursor:hand;"

         onclick="c()"></div>

</div>

</body>

</html>

Selenium_获取相对坐标的更多相关文章

  1. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  2. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  3. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  4. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  5. Android必知必会-获取View坐标和长宽的时机

    如果移动端访问不佳,请访问–>Github版 背景 最近要实现一个功能,用到了一些属性动画,需要获取一些View的坐标信息,设计图如下: 这里我使用的是DialogFragment来实现的,可以 ...

  6. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  7. JAVA中经过nginx反向代理获取客户端ip并获取相关坐标等信息

    关于搜狐新浪ip库查询接口的使用 直接输出访客ip及所在城市: <script src="http://pv.sohu.com/cityjson?ie=utf-8" > ...

  8. 微信小程序 --- 获取当前坐标

    获取位置:get.location type:wgs84(是全球定位系统,获取的坐标,gcj02是国家测绘局给出的坐标) btnclick:function(){ wx.getLocation({ t ...

  9. JS 获取鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. android 入门-本地化语言

    打包安装到手机上,改变手机系统语言,你在看看是不是改变了.哇.真的可以.

  2. HR外包系统 - 客户员工 发薪需求/个税需求 设置

    最好,客户公司层面进行设置,如果单一情况,只需要设置公司,如果不是单一情况,设置员工, 另外员工只能从公司设置好的地方选择过来. 增强系统简便设置和设置的灵活性.

  3. C++Primer快速浏览笔记-类型转换

    bool b = 42; // _b is true_ int i = b; // _i has value 1_ i = 3.14; // _i has value 3_ double pi = i ...

  4. linux内核的组成,王明学learn

    linux内核的组成 一.linux内核源代码目录结构 arch: 包含和硬件体系结构相关的代码, 每种平台占一个相应的目录, 如 i386.ARM.PowerPC.MIPS 等. block:块设备 ...

  5. [liferay6.2]input-date日期控件

    input-date日期控件 liferay6.2中默认提供了一个简单的日期控件input-date,调用代码片段如下: <% Calendar calendar = Calendar.getI ...

  6. C# 指针操作图像 二值化处理

    /// <summary> /// 二值化图像 /// </summary> /// <param name="bmp"></param& ...

  7. CSS总结1

    新增:修改placeholder样式 ::-moz-placeholder{color:red;} //ff19+ :-moz-placeholder{color:red} //ff18- ::-we ...

  8. JS(ajax笔记)

    简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是与服务器交 ...

  9. 如何处理js的跨域问题

    在bill.mail.10086.cn域内访问smsrebuild1.mail.10086.cn下的接口出现“阻止跨域源请求” 例如: URL 说明 是否允许通信 http://www.a.com/a ...

  10. linux查看硬件以及系统信息

    http://tech.idv2.com/2008/01/11/linux-sysinfo-cmds/ /proc目录的内容:   /proc/cpuinfo 关于处理器的信息,如类型.厂家.型号和性 ...