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. Ubuntu下SSH安装

    step: 1.输入命令: sudo apt-get install openssh-server 2.验证sshserver是否启动了,以下两条命令均可 ps -e | grep ssh netst ...

  2. 去除Android APP里面的广告

    如何去除Android游戏软件中的广告:很多时候,我们下载好一款Andriod游戏软件,却被游戏软件中的广告弄的很烦.不停跳动的广告让人觉得非常不爽,而且在玩游戏的时候,还有可能点击到广告,中断游戏. ...

  3. 细说MySQL备份的基本原理（系列一 ） 备份与锁

    数据库作为一个系统中唯一或者主要的持久化组件,对服务的可用性和数据的可靠性要求极高. 作为能够有效应对因为系统软硬件故障.人工误操作导致数据丢失的预防手段,备份是目前最为常见的数据库运维操作. 考虑到 ...

  4. NET-知识点：C#中Equals和==比较

    第一.相等性比较 其实这个问题的的本质就是C#的相等比较,相等比较可以分两类: 1.引用相等性,引用相等性指两个对象引用均引用同一基础对象. 2.值相等性,值相等性指两个对象包含相同的一个或多个值,其 ...

  5. 如何区分prometheus中Histogram和Summary类型的metrics？

    要理解它们的区别,关键还是告业务应用. 但如何在学习时,如何区分呢? 有以下几个维度: histogram有bucket,summary在quatile. summary分位数是客户端计算上报,his ...

  6. 【AtCoder】ARC098题解

    C - Attention 枚举,计算前缀和即可 代码 #include <bits/stdc++.h> #define fi first #define se second #defin ...

  7. spark优化之并行度

    这个其实我前面已经记录过了,这里在记录一下. 我可以通过参数人为的来控制分区大小,增加分区中即可增加任务的并行度,并行度高自然运行的就快了嘛. 官方推荐集群中每个cpu并行的任务是2-3个(也就是2- ...

  8. 【noip模拟赛3】拣钱

    描述 最近,Henry由于失恋(被某大牛甩掉!)心情很是郁闷.所以,他去了大牛家,寻求Michael大牛的帮助,让他尽快从失恋的痛苦中解脱出来.Michael大牛知道Henry是很爱钱的,所以他是费尽 ...

  9. P2858 [USACO06FEB]奶牛零食Treats for the Cows

    P2858 [USACO06FEB]奶牛零食Treats for the Cows区间dp,级像矩阵取数, f[i][i+l]=max(f[i+1][i+l]+a[i]*(m-l),f[i][i+l- ...

  10. LruCacahe在美团DSP系统中的应用演进

    背景 DSP系统是互联网广告需求方平台,用于承接媒体流量,投放广告.业务特点是并发度高,平均响应低(百毫秒). 为了能够有效提高DSP系统的性能,美团平台引入了一种带有清退机制的缓存结构LruCach ...