clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；

offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；

screenX, screenY是相对于用户显示器的位置

x,y是鼠标相对于当前浏览器的位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD><TITLE>Measure for Measure</TITLE>

<SCRIPT>

<!--

function one() {

report.value = "The DIV above is relatively positioned in the BODY.    The style object contains the information that was set in the inline style to position this object.    The following are the values that would be reported for the various position and dimension properties on the style object for the DIV:" + "\n\n";

report.value= report.value + " mydiv.style.top (string) = " + foodiv.style.top + "\n";

report.value= report.value + " mydiv.style.left (string) = " + foodiv.style.left + "\n";

report.value= report.value + " mydiv.style.height (string) = " + foodiv.style.height + "\n";

report.value= report.value + " mydiv.style.width (string) = " + foodiv.style.width + "\n";

report.value= report.value + " mydiv.style.pixelTop (long) = " + foodiv.style.pixelTop + "\n";

report.value= report.value + " mydiv.style.pixelLeft (long) = " + foodiv.style.pixelLeft + "\n";

report.value= report.value + " mydiv.style.pixelHeight (long) = " + foodiv.style.pixelHeight + "\n";

report.value= report.value + " mydiv.style.pixelWidth (long) = " + foodiv.style.pixelWidth + "\n";

report.value= report.value + " mydiv.style.posTop (long) = " + foodiv.style.posTop + "\n";

report.value= report.value + " mydiv.style.posLeft (long) = " + foodiv.style.posLeft + "\n";

report.value= report.value + " mydiv.style.posHeight (long) = " + foodiv.style.posHeight + "\n";

report.value= report.value + " mydiv.style.posWidth (long) = " + foodiv.style.posWidth + "\n";

}

function two() {

report.value = "Each object has a set of offset positions.    The offset properties for the positioned darkBlue DIV above are: \n";

report.value= report.value + "     offsetLeft = " + foodiv.offsetLeft + "\n";

report.value= report.value + "     offsetTop = " + foodiv.offsetTop + "\n";

report.value= report.value + "     offsetHeight = " + foodiv.offsetHeight + "\n";

report.value= report.value + "     offsetWidth = " + foodiv.offsetWidth + "\n";

report.value= report.value + "     offsetLeft = " + document.body.offsetLeft + "\n";

report.value= report.value + "     offsetTop = " + document.body.offsetTop + "\n";

report.value= report.value + "     offsetHeight = " + document.body.offsetHeight + "\n";

report.value= report.value + "     offsetWidth = " + document.body.offsetWidth + "\n";

}

function three() {

report.value = "Scroll values for the darkBlue DIV object" + "\n";

report.value= report

clientX, clientY，offsetX, offsetY,screenX, screenY, x, y的更多相关文章

  1. 如何更好的理解（pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY，offsetLeft,style.left）

    1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...

  2. JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

    首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...

  3. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

    总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...

  4. JavaScript 中事件对象参数：clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  5. pageX，clientX，screenX，offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

  6. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  7. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  8. javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

  9. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

随机推荐

  1. docker 构建带健康检查的redis镜像

    =============================================== 2018/11/5_第1次修改                       ccb_warlock == ...

  2. 一个查看Access数据库密码的工具

    一个可以查看Access数据库密码的工具AccessCracker.需要.net2.0环境支持. 网盘地址:https://pan.baidu.com/s/1btbsFcsKO0Enj-rjkTlz6 ...

  3. Python_oldboy_自动化运维之路_面向对象2（十）

    本节内容: 面向对象程序设计的由来 什么是面向对象的程序设计及为什么要有它 类和对象 继承与派生 多的态与多态性 封装 静态方法和类方法 面向对象的软件开发 反射 类的特殊成员方法 异常处理 1.面向 ...

  4. elasticflow

    https://github.com/robcowart/elastiflow/blob/master/INSTALL.md

  5. P3512 [POI2010]PIL-Pilots

    P3512 [POI2010]PIL-Pilots我一开始打的O(n^2)(最坏情况)的算法.枚举区间长度.60分 #include<iostream> #include<cstdi ...

  6. CSS transform中的rotate的旋转中心怎么设置

    transform-origin属性 默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处.我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转.移 ...

  7. MIT-6.828-JOS-lab4:Preemptive Multitasking

    Lab 4: Preemptive Multitasking tags: mit-6.828, os 概述 本文是lab4的实验报告,主要围绕进程相关概念进行介绍.主要将四个知识点: 开启多处理器.现 ...

  8. Linux云服务器下Redis安装与部署以及设置redis后台运行

    Redis下载: http://redis.io/download 我下载的4.0.11 上传到服务器 注: 官方的建议是直接在linux下载并解压编译 这里不建议先解压再上传到服务器,之前我这样做, ...

  9. [漏洞分析]phpyun系统重装安全隐患#影响从phpyun4.2部分，4.3到4.5全版本

    0x00 之前在t00ls上看到的,漏洞原理很简单,但是都是细节问题,很值得去学习. 感谢bypass师傅. 也发了邮件给官方,但没有任何回复,估计是漏洞作者bypass师傅报备了吧.   0x01 ...

  10. 网络数据包信息收集工具ferret-sidejack

    网络数据包信息收集工具ferret-sidejack   网络数据包传递用户的各种操作和对应的信息.但是由于各种数据混在一起,不利于渗透测试人员分析.Kali Linux提供了一款信息搜集工具ferr ...