clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

最新推荐文章于 2020-06-14 13:16:51 发布
最新推荐文章于 2020-06-14 13:16:51 发布
阅读量648 收藏
点赞数
分类专栏： javascript 文章标签： properties object string function div scroll 
 
 

  
  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
Jarvis-Li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
【转】height,posHeight和pixelHeight区别
weixin_30402085的博客
04-12 210
height 返回高度 带单位 posHeight 不带单位的数字 pixelHeight 转换成像素后的数字 不带单位 更多资料 http://www.1fan.com.cn 转载于:https://www.cnblogs.com/bingguang/p/3660360.html...
textarea文本域宽度和高度（width、height）自动适应变化处理
阿珊境界
03-28 4970
HTML>   HEAD>   TITLE>textarea宽度、高度自动适应处理方法TITLE>      style type="text/css">   .comments {    width:100%;/*自动适应父布局宽度*/    overflow:auto;    word-break:break-all;   /*在ie中解决断行问题(防止自动变为在一行显示，主
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
line-height属性不同值类型的表现
m1101485871的博客
05-29 929
line-height属性值的类型line-heigh属性的值可以为normal，纯数字，具体带单位长度，百分比数值，inherit。重点讨论 normal和inherit不做探究，normal是默认值，浏览器计算合理行间距，inherit继承父元素line-height属性； 长度类型是设置固定的行高值，比较好理解； 数字类型会根据行内元素有效的字体大小计算出行高； 百分比会根据设置line-he
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
event.X和event.clientX的区别分析
09-05
解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
event.x,event.clientX,event.offsetX区别
01-19
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
TEXTAREA高度自适应自动展开
JED'S BLOG
08-21 1万+
需求web开发中，使用textarea的场景非常常见。但是原生的textarea不能根据用户输入的内容来伸缩自己的高度，这个特性感觉很反人类，在一些特定下我们希望它的高度能随着内容自适应，而不出现滚动条。就像下面的图一样。demo图实现代码 html <textarea id="textarea"></textarea> js // textarea 自适应高度 function make
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?
DavidMen的专栏
09-10 1292
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?2007-10-10 17:41clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offset
IMU(陀螺仪、加速度计)&Magnetometer(磁力计)校准方法和流程
wuwuku123的博客
04-15 2万+
一、何为校准： 校准的目的是因为厂商在生产器件时，由于工艺、技术等原因，致使器件存在缺陷，导致实际应用时，存在误差！ 一般器件在出厂时，都会做一些校准处理，比如以Sensonor公司的Stim300为例： 一般用户采购IMU器件后，仍会对IMU进行校准，参数如下：零偏稳定性、比例因子（温度）、非正交性等。 批量使用和单个试验样机的校准方式和校准参数多少有不同；...
获取对象实际高度scrollHeight
嘟哝什么
08-10 1688
获取对象的实际高度，包括overflow：hidden；等未显示的高度var $ceshi = DOM; $ceshi[0].scrollHeight;切记 一定要加上[0]
磁力计校正和数据处理
xian_z的博客
11-07 3万+
在飞控涉及到的几个传感器中磁力计因该是属于最简单的传感器。在飞控上一般使用的磁力计传感器芯片是HMC5883L、HMC5983、MPU9250、MAG3110等。这些芯片利用的物理原理都相同，只是在精度和数据接口上有些区别。下面简单说说磁力计的原理。 我们的地球都是有磁场存在的，地理的南极是地磁的北极，在地球的每一个区域都是受地磁影响的，可以说地磁无处不在。而且地磁的方向都是一定的，除了在南北极地
深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
juceli的博客
07-24 1145
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
基于STM32F407四旋翼无人机---AK8975磁力计（四）
qq_43046763的博客
06-14 4732
@TOC 1、磁力计简单介绍 1.1、磁力计简介 1.2、磁力计原理图 2、磁力计数据获取 3、磁力计椭球拟合校准 3.1、简单介绍椭球拟合 3.2、校准代码 磁力计基本介绍 该模块采用高灵敏度霍尔传感器技术，通过IIC读取X,Y,Z轴的磁力计数据，通过解算磁力计数据得出比较可靠的偏航角，由于只通过MPU6050解算出来的欧拉角，偏航角并不准确，则需要通过磁力计解算出来的偏航角去修正，得到准确的偏航。 1.2、磁力计原理图 磁力计原理图如下：由于IIC可以同时挂3个设备，就可以把MPU6050、MS5611
小程序利用canvas实现波浪动态图，原生canvas的部分限制
qq_28666545的博客
12-17 5723
小程序利用canvas实现波浪动态图小程序的canvas与该动态图的问题首先上效果图片下面直接上代码 小程序的canvas与该动态图的问题 小程序的canvas与html的canvas实现是完全一致的，但是会有一些坑，比如在component使用时会有一些限制，需要绑定this，匹配上下文环境获取canvas，另外看到一种方式，请参考 http://blog.majinyu.xyz/index.p...
关于磁力计偏置值的标定实践
huangdianye
12-16 1902
关于磁力计偏置值的标定实践前言采集数据处理数据后记 前言 前段时间上闲鱼入手了SKYE ORBIT无人机套装，因为没有APP，飞不起来，商家都打折甩手卖出去。我倒腾了半天，最后还是决定换个飞控，原本的模块暂时没有换，把电调的线给拉了出来，凑了一下手头上的stm32的开发板，上面刚好有一个MPU9250，所以就决定在闲暇时间自己写飞控了。使用Mathony算法解算姿态时发现加入了磁力计，Yaw角反而...
补全下面的html和css代码，实现这个功能可以分为两个步骤： 实现小球的拖拽 可以通过监听小球的mousedown、mousemove和mouseup事件，实现小球的拖拽。具体实现方法如下： 复制 var ball = document.getElementById("ball"); var container = document.getElementById("container"); var isDragging = false; var offsetX = 0; var offsetY = 0; ball.addEventListener("mousedown", function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; }); 判断小球是否移动到框里 可以通过判断小球是否与框的边界相交，来判断小球是否移动到框里。具体实现方法如下： 复制 var ballRect = ball.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); if ( ballRect.left >= containerRect.left && ballRect.right <= containerRect.right && ballRect.top >= containerRect.top && ballRect.bottom <= containerRect.bottom ) { // 小球在框里 } else { // 小球不在框里 } 把这两个步骤结合起来，就可以实现拖拽小球移动到框里的功能了。
最新发布
05-28
var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值