pageX--clientX--scrollLeft－clientLeft-offsetWidth

// 鼠标在当前页面的位置e.clientX

e.pageX有兼容性问题  从IE9以后才支持

e = e || window.event;
console.log(e.pageX);
console.log(e.pageY);

 

### 滚动偏移
var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)

 获取盒子所以的宽高，包括内边距和未显示的内容，不包括滚动条
console.log(box.scrollWidth)
console.log(box.scrollHeight)

//输出页面滚动出去的距离   有兼容性问题

var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

// 获取鼠标在页面的位置clientX有滚动时pageX

var pageX = e.pageX || e.clientX + scrollLeft ;
var pageY = e.pageY || e.clientY + scrollTop;

 

 

// 获取的鼠标在浏览器的可视区域的坐标
console.log(e.clientX);
console.log(e.clientY);

获取盒子边框的宽度
console.log(box.clientLeft);
console.log(box.clientTop);

 获取盒子可视区域的宽高，包括内边距， 但是不包括边框，不包括滚动条
console.log(box.clientWidth);
console.log(box.clientHeight);

 //获取窗口的宽度和高度

width = document.documentElement.clientWidth ;

heigth = document.documentElement.clientHeight;

 

 获取盒子在页面上的位置的偏移量
- offsetParent用于获取定位的父级元素
- offsetParent和parentNode的区别
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);

获取盒子的宽高(包括内边距和边框)
console.log(box.offsetWidth);
console.log(box.offsetHeight);