js获取元素宽高和位置的几种方法&&点击事件坐标
一.获取宽高：
1.行内样式获取宽高：
var dom= document.getElementById("div");
var divWidth = dom.style.width;
var divHeight = dom.style.height;
注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border
2.offset/client/scroll方法获取：
var divOffset = dom.offsetWidth/Height; //元素的宽度包含padding和border
var divClient = dom.clientWidth/Height; //元素的宽度包含padding不包含border
var divScroll = dom.scrollWidth/Height; //元素的宽度包含padding不包含border, 会随content的内容增加
// divScroll >= divScroll
3.dom.getBoundingClientRect()
属性说明:
width, height: 元素的实际宽度 / 宽度
left: 元素左边距离视口左边的距离
right: 元素右边距离视口左边的距离
top: 元素上边距离视口上边的距离
bottom: 元素下边距离视口上边的距离
参考: getBoundingClientRect获取DOM元素获取的宽和高以及位置
额外:window.getComputedStyle(dom)
获取dom元素的所有样式,包含widht,top,padding等
dom.style.xx
style.display = ‘none’
二.获取元素位置
1.dom.getBoundingClientRect() 参考: getBoundingClientRect获取DOM元素获取的宽和高以及位置
2.offset属性
var divOffset = dom.offsetLeft/Top; //元素左/上部相对于父级元素左/上部的像素值
// 额外
var parent = dom.offsetParent; //元素的父级元素
// 注意 client获取的是元素的边框宽度
var divClient = dom.clientLeft/Top;
三.浏览器可视区域大小（不包括工具栏和滚动条）
1. IE9+、Chrome、Firefox、Opera 以及 Safari：
var winH1 = window.innerHeight;
var winW1 = window.innerWidth;
2. IE8、7、6、5：
document.documentElement(document.body).clientHeight;
3. 兼容性比较好的写法
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
四.screen方式获取窗口的大小（包含浏览器顶部的工具栏，不包含屏幕底部的任务栏）
var screenH/W = screen.availHeight/Width;
注：这种方式获取的是屏幕的大小，这个不会随着浏览器窗口大小而变化，这个值是固定的
点击事件的坐标 clientX、screenX、pageX、offsetX、pageXOffset等
event.clientX与event.clientY
鼠标相对于浏览器可视区域的X,Y坐标（将参照点改成了浏览器内容区域的左上角），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。
event.pageX与event.pageY
类似于event.clientX、event.clientY，但它们是相对于整个html文档坐标（包含了文档过长而被卷去的长度/宽度）而非浏览器可视区域坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
pageY = clientY + scrollTop/pageYoffset
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
event.offsetX与event.offsetY
这两个属性是IE特有的，鼠标相对于“触发事件的元素”的位置（鼠标相对于事件源元素的X,Y坐标）。
window.pageXOffset(属性是只读的)
整数只读属性，表示X轴滚动条向右滚动过的像素数（表示文档向右滚动过的像素数）。IE不支持该属性，使用body元素的scrollLeft属性替代。
window.pageYoffset
整数只读属性，表示Y轴滚动条向下滚动过的像素数（表示文档向下滚动过的像素数）。IE不支持该属性，使用body元素的scrollTop属性替代。
scrollTop
滚动出的距离, 注意兼容
var scrollTop = window.pageYoffset || document.documentElement.scrollTop(firefox/chrome) || document.body.scrollTop(ie) || 0
x、y
是相对于浏览器/还是视口?, 好像有兼容性, 看下面参考文章
参考:
clientX、screenX、pageX、offsetX、pageXOffset的区别
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
JS中DOM元素获取的宽和高的方法
