offsetTop clientX pageX screenX scrollTop之间的区别以及代码实现
2015-07-21 14:14
471 查看
边界尺寸
var a= e.pageX;//鼠标在页面中的坐标位置,可能大于整个屏幕var ay= e.pageY;//鼠标在页面中的坐标位置,可能大于整个屏幕
//console.log(ay);
var b= e.clientX;//鼠标在屏幕上的x坐标
var by= e.clientY;//鼠标在屏幕上的y坐标,所以ay>=by
//console.log(by);
var f= e.screenX;//鼠标在屏幕上的x坐标
var fy= e.screenY;
//console.log(fy);
//偏移量
var c=document.getElementById("top").offsetWidth;
var ch=document.getElementById("top").offsetHeight;
//console.log(c);//元素在水平空间上占用的宽度大小,包括滚动条和边框
var ct=document.getElementById("top").offsetTop;
var cl=document.getElementById("top").offsetLeft;
//console.log(ct);//元素上边框至包含元素上边框的距离
//客户区大小
var d=document.getElementById("top").clientWidth;
var dh=document.getElementById("top").clientHeight;
//console.log(d);//元素内部空间的大小,就是不包框边框和滚所以动条,offsetWidth>=clientWidth
//滚动条大小
var e=document.getElementById("top").scrollWidth;
var eh=document.getElementById("top").scrollHeight;
//console.log(e);//没有滚动条情况下的宽度
var et=document.getElementById("top").scrollTop;
var el=document.getElementById("top").scrollLeft;
//console.log(et);//0
console.log(el);//0
源码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <title>Document</title> <style> body{ background-color: #3399ff; overflow: hidden; } body >div{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; width: 300px; height: 300px; background-color: deeppink; border: 20px solid silver; } body >div >div{ width: 100%; margin-top: 100px; height: 100px; background-color: green; } body >div >div >span{ display: block; height: 100%; width: 40%; background-color: darkred; position: relative; } body >div >div >span >a{ position: absolute; display: block; width: 40px; height: 40px; bottom: 0; right: 0; background-color: cornflowerblue; } </style> </head> <body> <div id="top"> <div> <span> <a href=""></a> </span> </div> </div> </body> <script> window.onload=function(){ document.addEventListener('mousemove',function(e){ var a= e.pageX;//鼠标在页面中的坐标位置,可能大于整个屏幕 var ay= e.pageY;//鼠标在页面中的坐标位置,可能大于整个屏幕 //console.log(ay); var b= e.clientX;//鼠标在屏幕上的x坐标 var by= e.clientY;//鼠标在屏幕上的y坐标,所以ay>=by //console.log(by); var f= e.screenX;//鼠标在屏幕上的x坐标 var fy= e.screenY; //console.log(fy); //偏移量 var c=document.getElementById("top").offsetWidth; var ch=document.getElementById("top").offsetHeight; //console.log(c);//元素在水平空间上占用的宽度大小,包括滚动条和边框 var ct=document.getElementById("top").offsetTop; var cl=document.getElementById("top").offsetLeft; //console.log(ct);//元素上边框至包含元素上边框的距离 //客户区大小 var d=document.getElementById("top").clientWidth; var dh=document.getElementById("top").clientHeight; //console.log(d);//元素内部空间的大小,就是不包框边框和滚所以动条,offsetWidth>=clientWidth //滚动条大小 var e=document.getElementById("top").scrollWidth; var eh=document.getElementById("top").scrollHeight; //console.log(e);//没有滚动条情况下的宽度 var et=document.getElementById("top").scrollTop; var el=document.getElementById("top").scrollLeft; //console.log(et);//0 console.log(el);//0 },false) }; </script> </html>
相关文章推荐
- 解决 eclipse 新建 maven 后无法显示 src/main/java 和 src/main/test
- PAT (Basic Level) Practise (中文)1005. 继续(3n+1)猜想 (25) C语言
- 决策树算法---java
- 【j2ee spring】46、巴巴运动网——购物车
- python 使用list和tuple
- phpstorm + xdebug 远程断点调试,详解
- LeetCode java实现Add Two Numbers
- Java Timer的使用(timer.schedule定时执行)
- 使用python客户端访问impala
- ThinkPHP快捷函数
- C#中数组的使用
- PAT (Basic Level) Practise (中文)1004. 成绩排名 (20) C语言
- Qt数据库:(七)QSqlRelationalTableModel
- C#中数组的使用
- 对JAVA的一些个人总结——面向对象
- C++ STL算法系列4---unique , unique_copy函数
- C#中特性,以及应用场景(收藏链接)
- python enumerate 用法
- C++ string学习
- java错误篇一