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. linux 环境变量设置方法总结（PATH / LD_LIBRARY_PATH）

    PATH和LD_LIBRARY_PATH本质都是变量,所谓变量的意思就是由别人赋值产生的,直觉往往会让我们添加和减少这个变量本身的某些路径,实际上这是不正确的.正确的做法是我们要去修改赋予这个变量数值 ...

  2. Laravel Model 的 fillable （白名单）与 guarded （黑名单）

    例如 protected $fillable = ['name']; protected $guarded = ['price']; 定义了 name 字段可以写入/修改,而 price 字段不可以. ...

  3. Android Studio一直 Fetching Documentation...

    Android查看私有库android-spport-v4.jar & android-support-v7-appcompat.jar源码 https://www.cnblogs.com/s ...

  4. .NetCore使用FluentValidation实现友好验证提示

    Nuget包导入FluentValidation.AspNetCore 官方的用法是在services中添加如下来操作 services.AddMvc().AddFluentValidation(co ...

  5. 如果django里的视图是类(CBV)，应该如何写Url的测试用例？

    晚上回家测试了很多方式,都不行. 网上搜索找不到答案, 最后还是官方文档最抵用呢. https://docs.djangoproject.com/en/2.1/topics/testing/tools ...

  6. Vue2服务端渲染

    Vue2 服务端渲染 花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500 ...

  7. requireJS2

    requireJS的初步掌握(二) 前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描 ...

  8. 【LOJ】 #6012. 「网络流 24 题」分配问题

    题解 又写了一遍KM算法,这题刚好是把最大最小KM拼在一起写的,感觉比较有记录价值 感觉KM始终不熟啊QAQ 算法流程大抵如下,原理就是每次我们通过减少最少的匹配量达成最大匹配,所以获得的一定是最大价 ...

  9. Linux下jdk、Tomcat、MySQL的安装

    1. 安装JDK 1.上传jdk-7u45-linux-x64.tar.gz到Linux上(使用WinSCP工具) 2.解压jdk到/usr/local目录 tar  -zxvf  jdk-7u45- ...

  10. 【Java】 大话数据结构(12) 查找算法(3) （平衡二叉树（AVL树））

    本文根据<大话数据结构>一书及网络资料,实现了Java版的平衡二叉树(AVL树). 平衡二叉树介绍 在上篇博客中所实现的二叉排序树(二叉搜索树),其查找性能取决于二叉排序树的形状,当二叉排 ...