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. centos下配置nginx支持php

    添加nginx 默认主页index.php vim .../etc/nginx/conf.d/default.conf location / { root   /usr/share/nginx/htm ...

  2. 在Scrapy项目【内外】使用scrapy shell命令抓取 某网站首页的初步情况

    Windows 10家庭中文版,Python 3.6.3,Scrapy 1.5.0, 时隔一月,再次玩Scrapy项目,希望这次可以玩的更进一步. 本文展示使用在 Scrapy项目内.项目外scrap ...

  3. Springboot 之 自定义配置文件及读取配置文件

    本文章来自[知识林] 读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两 ...

  4. H5新增语义化标签

    一.根据页面的结构,由div派生的标签. <header> <footer> <nav> 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav& ...

  5. UE没法远程修改文件

    UE没法远程修改文件修改ftp和sftp修改方式都没有作用,考虑可能是防火墙的作用,关闭防火墙可以.于是在控制面板->防火墙->修改策略中将UE的公用网络打开.

  6. Centos7下yum安装zabbix-server的部署（一）

    一.环境准备 OS:CentOS 7.2 64bit Zabbix版本:3.0.12 MySQL版本:5.6 hostname ip 主机用途zabbix-server 10.0.0.44 服务端 z ...

  7. C/C++有效对齐值的确定

    先来看看什么是对齐.现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...

  8. django为url写测试用例

    这个和为orm写测试用例类似. 但为了区分文件,还是建议在app目录下,用tests_orm.py,tests_url.py这类单独文件加以区分. urls.py如果如这样. from django. ...

  9. 【LOJ】#2532. 「CQOI2018」社交网络

    题解 基尔霍夫矩阵,外向树是入度矩阵-邻接矩阵 必须删掉第一行第一列然后再求行列式 代码 #include <bits/stdc++.h> #define fi first #define ...

  10. 【LOJ】#2115. 「HNOI2015」落忆枫音

    题解 如果不加这条边,那么答案是所有点入度的乘积 加上了这条边之后,我们转而统计不合法的方案数 就是相当于统计一条路径从y到x,新图所有点度的乘积除上这条路径所有点的点度乘积 初始化为\(f[y] = ...