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. System.Web.Routing入门及进阶　上篇

    System.Web.Routing已经作为一个程序集包含在.net3.5sp1中发布了.虽然我们并没有在3.5sp1中发现Asp.net Mvc的踪迹,但是亦以感觉到它离我们不远了. System. ...

  2. window10 显示QQ图标

  3. PHP转盘抽奖算法

    流程: 1.拼装奖项数组 2.计算概率 3.返回中奖情况 代码如下: 中奖概率 ' v ' 可以在后台设置,传到此方法中,注意传整数 function get_gift(){ //拼装奖项数组 // ...

  4. P4186 【[USACO18JAN]Cow at Large G】

    思路是覆盖子树,我们发现,农民想截住牛的最优策略是不断向上来尽可能地覆盖更大的子树 我们想要尽早地覆盖一个子树,一个显然的贪心是在这个子树中选取深度最小的一个放农民 如果我们在一个点放置了农民,那么其 ...

  5. app后端设计-- 数据库分表

    当项目上线后,随着用户的增长,有些数据表的规模会以几何级增长,当数据达到一定规模的时候(例如100万条),查询,读取性能就下降得很厉害,这时,我们就要考虑分表. 更新表数据时会导致索引更新,当单表数据 ...

  6. Intellij Idea 使用时总是打开上次的项目

    Appearance&Behaviour-->>System Settings-->>Startup&Shutdown-->>Reopen last ...

  7. k8s的imagePullSecrets如何生成及使用

    如果公司的docker仓库(harbor),需要用户认证之后,才能拉取镜像. 那如何在k8s里生成这个secret呢? 这个secret如何还原呢? 在k8s的yaml文件里如何实现呢? 这里提供几个 ...

  8. JavaScript中变量的相互引用

    http://www.jb51.net/article/23387.htm  

  9. 说commit，rollback

    事务执行失败后,看做的是commit还是rollback:commit是把执行成功的部分提交了,rollback就是全回滚了.如果rollback失败了,此时不处理,等到客户端断开,MySQL内部默认 ...

  10. Angular快速学习笔记（3） -- 组件与模板

    1. 显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性. 使用插值表达式显示组件属性 要显示组件的属性,最简单的方式就是通过插值表 ...