- 一测试代码如下
- 二不同浏览器对这些属性的支持
- 三图解 eventoffsetXeventclientXeventpageXeventscreenX属性
- 四图解 eventlayerXeventlayerY 属性
- 五图解 eventxeventy 属性
- 六Jquery 兼容写法
一、测试代码如下：
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <style> body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto} .main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;} .box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;} </style> </head> <body style="height:1600px;"> <div class="main"> <div class="box" id="box"></div> </div> <script> var oBox = document.getElementById('box'); window.onload = function(){ oBox.onmousedown = function(ev){ ev = ev || window.event; console.log(ev.offsetX, ev.offsetY); console.log(ev.clientX, ev.clientY); console.log(ev.pageX, ev.pageY); console.log(ev.screenX, ev.screenY); console.log(ev.layerX, ev.layerY); console.log(ev.x, ev.y); } } </script> </body> </html>
二、不同浏览器对这些属性的支持：
三、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性
四、图解 event.layerX，event.layerY 属性
五、图解 event.x，event.y 属性
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
六、Jquery 兼容写法
jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。
<script> $(function(){ $("#box").mousedown(function(event){ console.log(event.offsetX, event.offsetY); console.log(event.clientX, event.clientY); console.log(event.pageX, event.pageY); console.log(event.screenX, event.screenY); /* firefox */ console.log(event.originalEvent.layerX, event.originalEvent.layerY); }); }); </script>
原文转载：http://blog.csdn.net/lzding/article/details/45437707
网页可见区域宽： 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.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
HTML控件offsetTop、scrollTop等属性
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
原文链接：http://blog.sina.com.cn/s/blog_63426ff90100m8c3.html