元素位置大小获取
一、元素节点的大小位置
Element.clientHeight = 内容高 + padding
Element.clientWidth = 内容宽 + padding
Element.clientLeft = 元素节点左边框（left border）的宽度（单位像素）
Element.clientTop = 元素顶部边框的宽度（单位像素）
Element.scrollHeight = 当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分（包括padding）
Element.scrollWidth = 当前元素的总宽度（单位像素）
Element.scrollLeft = 当前元素的水平滚动条向右侧滚动的像素数量
Element.scrollTop = 当前元素的垂直滚动条向下滚动的像素数量
Element.offsetHeight = 元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）
Element.offsetWidth = 元素本身的宽度、padding 和 border，以及垂直滚动条的宽度（如果存在滚动条）
Element.offsetLeft = 当前元素左上角相对于Element.offsetParent节点的水平位移
Element.offsetTop = 当前元素左上角相对于Element.offsetParent节点的垂直位移
(定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素
1.元素自身有fixed定位，offsetParent的结果为null
2.元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>)
var DOMRect = Element.getBoundingClientRect();
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
DOMRect.top = 元素上边到视窗上边的距离
DOMRect.bottom = 元素下边到视窗上边的距离
DOMRect.left = 元素左边边到视窗上边的距离
DOMRect.right = 元素右边到视窗上边的距离
DOMRect.width = 元素宽度 + padding + border
DOMRect.height = 元素高度 + padding + border
二、鼠标的位置
MouseEvent.clientX = 鼠标位置相对于浏览器窗口左上角的水平坐标（单位像素）
MouseEvent.clientY = 鼠标位置相对于浏览器窗口左上角的垂直坐标（单位像素）
MouseEvent.movementX = 当前位置与上一个mousemove事件之间的水平距离（单位像素）（currentEvent.screenX - previousEvent.screenX）
MouseEvent.movementY = 当前位置与上一个mousemove事件之间的垂直距离（单位像素）（currentEvent.screenY - previousEvent.screenY）
MouseEvent.screenX = 鼠标位置相对于屏幕左上角的水平坐标
MouseEvent.screenY = 鼠标位置相对于屏幕左上角的垂直坐标
MouseEvent.offsetX = 鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素）
MouseEvent.offsetY = 鼠标位置与目标节点上侧的padding边缘的垂直距离（单位像素）
MouseEvent.pageX = 鼠标位置与文档左侧边缘的距离（单位像素）
MouseEvent.pageY = 鼠标位置与文档上侧边缘的距离（单位像素）
二、window位置大小属性
window.innerHeight = 窗口视口的高度
window.innerWidth = 窗口视口的宽度
（这两个属性值包括滚动条的高度和宽度）
window.scrollX = window.pageXOffset = 页面的水平滚动距离
window.scrollY = window.pageYOffset = 页面的垂直滚动距离
浙公网安备 33010602011771号