`

js中获取各种窗口的大小和鼠标坐标

 
阅读更多

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth(包括边线的宽)
网页可见区域高:document.body.offsetHeight(包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidthvar t="";

获取鼠标位置:

event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的距离,但定位不光这样就行了,需要考虑到当前网页坐标并不是鼠标的位置(例如把网页滚动条拖到最右下方),所以我们需要加上下面的内容:

var x = event.clientX + document.body.scrollLeft;

var y = event.clientY + document.body.scrollTop;

注 意,在使用了W3C标准的网页中,document.body.scrollTop和document.body.scrollLeft会失效,这时要用 document.documentElement.scrollTop 和document.documentElement.scrollLeft。否则 scroll 所取出来的值一律为0

分享到:
评论

相关推荐

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...

    网页实现全屏获取鼠标坐标

    描述中提到"自己制作控件实现网页获取窗体外鼠标坐标",这可能是指在全屏模式下,通过JavaScript或者其他前端技术来监听鼠标移动事件,并计算出即使鼠标离开当前窗口,也能获取到其在屏幕上的绝对位置。"这只是个...

    JQuery获取鼠标坐标

    在IT领域,特别是前端开发中,获取鼠标坐标是一项基本但重要的功能,它广泛应用于各种交互设计、游戏开发、数据采集等场景。通过JQuery或原生JavaScript,开发者可以轻松实现这一功能,为用户提供更加丰富和动态的...

    鼠标坐标跟踪限时运行

    总之,“鼠标坐标跟踪限时运行”是IT领域中一项实用的技术,它结合了实时数据获取、时间限制以及用户行为分析,广泛应用于各种场景。理解和掌握这项技术,有助于提升软件开发和用户体验设计的能力。

    javascript获取鼠标当前位置坐标并显示

    ### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标,并实时显示这些坐标值。该功能主要涉及到以下几个知识点: 1. **事件监听器...

    跟随鼠标移动十字坐标显示,炫酷

    3. **坐标计算**:当`mousemove`事件触发时,我们可以从事件对象中获取鼠标的页面坐标(`event.clientX`和`event.clientY`)。接着,我们需要根据这些坐标更新十字架元素的CSS位置属性(如`left`和`top`),使其始终...

    火狐兼容获取鼠标的坐标

    标题“火狐兼容获取鼠标的坐标”涉及到的是在网页开发中如何在Firefox浏览器上获取...了解这些知识点后,开发者就能在Firefox和其他浏览器上实现一致的鼠标坐标获取功能,提升用户体验,同时确保代码的跨浏览器兼容性。

    【JavaScript源代码】JavaScript offset实现鼠标坐标获取和窗口内模块拖动.docx

    本文将深入探讨这些属性以及如何利用它们来实现鼠标坐标获取和窗口内模块的拖动功能。 首先,`offsetParent`属性用于获取元素的定位父元素。它与`parentNode`不同,`parentNode`返回元素的直接父节点,而`...

    Javascript元素位置、大小、鼠标定位操作

    在 Javascript 中,可以使用多种方法来操作元素的位置和大小。例如: 1. 使用 offsetTop、offsetLeft 等属性来设置元素的位置。 2. 使用 width、height 等属性来设置元素的大小。 3. 使用 scrollTop、scrollLeft 等...

    wincc获取鼠标位置.7z

    而在JavaScript中,可以使用`event.clientX`和`event.clientY`属性来获取鼠标位置,如下: ```javascript function OnMouseClick(event) { var x = event.clientX; var y = event.clientY; alert("鼠标位置: " +...

    鼠标移动显示坐标点

    在编程环境中,例如Python的Tkinter库,可以通过绑定`<Motion>`事件并调用`event.x`和`event.y`来获取鼠标坐标。而在JavaScript中,可以利用`addEventListener`监听`mousemove`事件,然后通过`event.clientX`和`...

    在页面中js获取光标/鼠标的坐标及光标的像素坐标

    1. `event` 对象:在JavaScript中,当发生事件(如鼠标移动)时,会生成一个事件对象,其中包含了关于事件的各种信息,包括鼠标的位置。 2. `clientX` 和 `clientY`:这两个属性分别表示鼠标相对于视口左上角的水平...

    获取图像中鼠标的坐标值

    5. **JavaScript**: 在Web开发中,你可以使用`event.clientX`和`event.clientY`属性来获取鼠标在HTML元素上的相对坐标。如果需要屏幕坐标,可以使用`window.pageXOffset`和`window.pageYOffset`调整。 6. **Qt**: ...

    使用JavaScript获取客户端的鼠标坐标信息

    在JavaScript编程中,获取客户端鼠标的坐标信息是一项基础但实用的技术。这可以帮助开发者实现各种交互式功能,如点击跟踪、拖放操作、热区检测等。以下将详细讲解如何使用JavaScript来获取这些信息。 首先,我们...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    Javascript dom位置、大小、鼠标定位操作

    【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分,JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...

    js 实现 状态栏显示鼠标位置

    js 实现 状态栏显示鼠标位置! 值得下载看看!资源免费,大家分享!!

    获取鼠标在文档的坐标位置(兼容多浏览器)

    本文将详细介绍如何通过JavaScript获取鼠标在文档中的坐标位置,并确保该方法能在多种主流浏览器中稳定运行。 #### 一、问题背景 当用户与网页进行交互时,如点击鼠标按钮,页面会触发相应的事件。这些事件携带了...

    C#限制鼠标活动区域并适时获取鼠标坐标

    不过,如果你需要在Web页面上获取鼠标坐标,可以使用JavaScript的`event.clientX`和`event.clientY`属性,或者在服务器端使用Ajax异步更新来实现类似的功能。 总的来说,C#提供了丰富的API和WinAPI接口来处理鼠标...

    捕获鼠标坐标连续点击源码

    2. **鼠标坐标获取**: 当鼠标在屏幕上移动时,系统会生成包含当前鼠标位置信息的事件对象。在JavaScript中,我们可以从`event`对象的`clientX`和`clientY`属性中获取到相对于浏览器窗口的坐标;如果是在HTML5的...

Global site tag (gtag.js) - Google Analytics