js三大系列和鼠标坐标--笔记(五)

       offset系列(看父元素有没有定位)

       1.父元素:没有脱离文档流

           offsetTop 、offsetLeft:对齐浏览器,自身最边缘(边框)到客户区最左/最上端的距离

       2.父元素:脱离文档流

           offsetTop 、offsetLeft:对齐父元素,自身最边缘(边框)到父级最左/最上端的距离

           offsetWidth、offsetHeight(元素实际宽高)与自身的border、padding、width/height有关,与父元素无关(就是边框到边框的距离)

js三大系列和鼠标坐标--笔记(五)

       client系列

       clientWidth、clientHeight(元素可视区域):与padding、content有关   (如果文本超出了盒子,得到的值不会加上超出的距离)。

       clientLeft、clientTop:border的宽度

       scroll系列

       scrollTop:向上卷曲出去的距离

       scrollHeight:如果内容没有超出盒子,就等于是clientHeight;如果超出了,等于文本高度

补充:

       event.clientX、ecent.clientY:鼠标相对于可视窗口的X、Y坐标

       event.screenX、event.screenY:鼠标相对于用户设备的X、Y坐标

       event.offsetX、 event.offsetY:鼠标相对于事件源的X、Y坐标(只有IE支持)

       event.pageX、event.pageY:鼠标相对于页面的X、Y坐标(加上了卷曲出去的距离)(IE不支持)