获取body相对于屏幕的位置,还是比较郁闷的,下面是本人的方法:
可选择的有screenLeft,screenTop,screenX,screenY,不过由于工具栏高度未知,所以很难计算出body的位置.
ie:window.screenLeft,window.screenTop为body相对于屏幕的位置(或许是html元素),(不用担心高度不定的工具条了)...
opera: 和IE一样, screenX和screenY始终为-4和-23,奇怪...(也不用担心可以随意拖动高度的工具条了)
ff: screenTop无值,screenY为浏览器相对于屏幕的位置...这样要加上工具条高度,(不过工具条高度不一定啊)...因此ff是无解的...
safari和chrome 取到的值也是浏览器在屏幕的位置,也无解
废话不多,上终极方法,就是e.screenX-e.clientX和e.screenY-e.clientY,就能取到body相对于屏幕的偏移,只是,要用户鼠标动一下才能取到值...
<!DOCTYPE html>
<head>
<style>
body,html{
background: blue;
}
</style>
<script>
function onInit(e){
var e = e||window.event;
//除ff
//alert([window.screenLeft,window.screenTop]);
//除ie (不过op取到的值有些怪异)
//alert([window.screenX,window.screenY]);
//由于状态栏的不确定,导致下面方法基本是无用的
//alert([window.outerHeight,window.innerHeight,window.outerHeight-window.innerHeight])
//用事件取值大法
getBodyOffset();
}
function getBodyOffset(){
if(window.attachEvent)
document.attachEvent("onmousemove",getScreenPx);
else if(window.addEventListener)
document.addEventListener("mousemove",getScreenPx,false);
}
function getScreenPx(e){
var e = window.event||e;
window.bodyOffset = [e.screenX-e.clientX,e.screenY-e.clientY];
}
</script>
</head>
<body onload="onInit(event)">
<div style="width:300px;height:600px;border:1px solid red;"></div>
<input type="button" onclick="alert(window.bodyOffset)" />
</body>
</html>
分享到：
相关推荐
- `offsetLeft` 和 `offsetTop`：获取对象相对于版面或由父坐标的计算左侧位置和顶端位置。 - `scrollLeft` 和 `scrollTop`：设置或获取位于对象左边界和窗口中目前可见内容的距离。 - `scrollWidth`：获取对象的...
`event`对象包含了一系列与鼠标位置相关的属性，如`pageX`和`pageY`，它们分别表示鼠标相对于整个文档的横向和纵向位置；而`clientX`和`clientY`则表示相对于当前可视窗口的位置。 #### 代码实现 ```html ...
通常，这些坐标是相对于浏览器窗口的左上角来计算的，包括水平坐标（x）和垂直坐标（y）。 2. **JavaScript中的事件对象**： 在JavaScript中，当鼠标事件（如`mousemove`）触发时，会生成一个事件对象（event ...
本文将介绍几种基于JavaScript实现获取鼠标点击位置坐标的常用方法，这包括获取相对于屏幕、浏览器窗口和文档的坐标。 1. 获取鼠标点击位置相对于屏幕的坐标 在不考虑iframe的情况下，不同浏览器对获取鼠标点击位置...
- `event.clientX`：表示鼠标事件相对于文档的水平坐标。 - `event.clientY`：表示鼠标事件相对于文档的垂直坐标。 - `event.offsetX`：相对于触发事件的元素的水平坐标。 - `event.offsetY`：相对于触发事件的...
与`clientX`和`clientY`类似，`offsetX`和`offsetY`属性返回鼠标指针相对于触发事件的元素左上角的坐标。这对于精确控制元素内部的交互效果非常有用。 ### 跨浏览器兼容性问题 在处理页面尺寸和位置时，不同的...
例如，`event.clientX`是相对于文档左边缘的水平坐标，`event.clientY`是相对于文档顶部的垂直坐标。`event.offsetX`和`event.offsetY`则是相对于触发事件的元素的坐标。 对于浏览器兼容性问题，`clientWidth`、`...
- **screenX/screenY**：这两个属性返回鼠标相对于屏幕左上角的水平和垂直距离。 2. **监听鼠标移动事件** 要获取鼠标的实时坐标，我们需要监听`mousemove`事件。可以使用`addEventListener`方法为文档的`window`...
1. **定义**：`event.clientX` 和 `event.clientY` 是 JavaScript 事件对象中的属性，用于获取鼠标点击位置相对于视口（即浏览器窗口）的横纵坐标。 2. **局限性**：虽然这两个属性能够提供基本的位置信息，但它们...
2. 获取屏幕坐标位置的示例与获取视口坐标位置的示例类似，也是通过为div元素添加点击事件监听器。点击事件发生时，通过事件对象获取screenX和screenY值，并弹出提示框展示这些值。 3. 获取页面坐标位置的示例则是...
- **`offsetLeft`**: 获取对象相对于版面或由 `offsetParent` 属性指定的父坐标的计算左侧位置。 - **`offsetTop`**: 获取对象相对于版面或由 `offsetParent` 属性指定的父坐标的计算顶端位置。 #### 6. 事件坐标 ...
6. 事件对象的坐标属性：在处理鼠标或触摸事件时，event对象提供了`clientX`, `clientY`, `screenX`, `screenY`, `pageX`和`pageY`等属性，分别表示鼠标位置相对于视口、屏幕和整个页面的坐标。 通过以上方法，我们...
- `event.pageX`：鼠标相对于文档的水平坐标，包含了页面水平滚动的距离。 - `event.pageY`：鼠标相对于文档的垂直坐标，包含了页面垂直滚动的距离。 - `event.target.offsetLeft`：事件目标相对于版面的水平偏移量...
在Web开发中，我们经常需要获取页面中某个元素相对于浏览器窗口的位置，例如在设计响应式布局、实现动态效果时。本文将详细介绍如何利用JavaScript来实现这一功能。 #### 标题：“js中获取相对位置” #### 描述：...
* `offsetHeight`: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 * `offsetLeft`: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 * `offsetTop`: 获取对象相对于...
在网页开发中，有时我们需要获取鼠标相对于某个特定元素（如div）的位置，这对于实现交互式功能，如拖放、悬浮提示等非常重要。标题所提到的“获取鼠标在div中的相对位置”就是一个这样的需求。下面我们将详细讲解这...
- `offsetLeft`：获取元素相对于版面或其offsetParent的左侧位置。 - `offsetTop`：获取元素相对于版面或其offsetParent的顶端位置。 8. **事件坐标** - `event.clientX`：相对于文档的水平坐标。 - `event....
当`mousemove`事件触发时，事件对象`event`会包含两个属性：`clientX`和`clientY`，它们分别表示鼠标相对于浏览器窗口左上角的水平和垂直坐标。此外，`screenX`和`screenY`则表示鼠标在屏幕上的绝对位置。 下面是一...
offsetLeft和offsetTop分别表示给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置和顶端位置。 通过以上方法，我们可以在不同浏览器环境下获取到浏览器窗口的可视区域宽度和高度、网页内容的实际...
屏幕坐标指的是鼠标指针相对于计算机屏幕的位置。这个坐标系统用于确定鼠标在整个屏幕中的位置，而不受浏览器窗口或页面滚动的影响。screenX和screenY属性记录了这个值。 示例代码如下： ```javascript var div = ...