网页元素位置、鼠标事件位置信息小结

　　在web开发过程中，比较容易混淆和让人感到头等的一部分就是下面这张图了吧，一下子都记住对我来说很难，在日常的开发过程中，

总是遇到了再查，遇到一点记一点，相信日积月累，总会记住。今天遇到了其中的一部分，做一下小结。

1，获取浏览器窗口的宽和高（兼容性写法）：

var winW=document.documentElement.clientWidth||document.body.clientWidth;
var winH=document.documentElement.clientHeight||document.body.clientHeight;

2，获取元素的宽和高：

var oWidth= oDrag.offsetWidth; //oDrag为获取的js对象，即要操作的元素
var oHeight=oDrag.offsetHeight;

3，获取元素距离浏览器左侧和上侧的距离

var oLeft=oDrag.offsetLeft; //oDrag为要操作的元素
var oTop=oDrag.offsetTop;

4，鼠标事件的位置信息

　　鼠标事件都是在浏览器窗口的特定位置上发生的，这个位置信息保存在事件的clientX和clientY属性中，所有浏览器都支持这两个属性，它们的值表示事件鼠标指针在

窗口中的水平和垂直坐标，不包括页面滚动的距离，即得到光标的坐标。这两个都是事件对象（event）的属性。

event.clientX
event.clientY

　　主要用于鼠标事件：onmousedown   onmousemove    onmouseup中