html,js如何获取当前鼠标位置

html,js如何获取当前鼠标位置,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml。

2、在indexhtml中的<script>标签,输入js代码:var e = event || windowevent;documentbodyinnerText = eclientX + ',' + eclientY;。

3、浏览器运行indexhtml页面,此时会打印出鼠标的当前位置坐标

//获取盒子的内容高度,内容高度也可用用boxclientHeight获取,内容高度不包括边框和外边距和滚动条

var box = documentgetElementById("box")

var contentHeight = windowgetComputedStyle(box)height //输出 '60px'

//js获取移动端屏幕高度和宽度等设备尺寸,兼容性比较好的方法

documentdocumentElementclientWidth;

documentdocumentElementclientHeight;

此外,还可以使用元素的点击事件来获取元素高度等内容。

一、clientX、clientY

点击位置距离当前body可视区域x,y坐标。

二、pageX、pageY

对于整个页面来说,包括被卷去的body部分的长度。

三、screenX、screenY

点击位置距离当前电脑屏幕的X、Y坐标。

四、offsetX、offsetY

相对于带有定位的父盒子的X、Y坐标。

五、X、Y

和screenX、Y一样。

以上五种是我们经常用到的坐标以及他们的含义。

下面附上一张图可以看得更清楚点。

以上就是关于html,js如何获取当前鼠标位置全部的内容,包括:html,js如何获取当前鼠标位置、2021-07-11【技术】js获取各种高度的方法、js获取鼠标距离等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10160140.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存