offset系列,cllient系列,page系列,scroll系列的区别

offset系列

• 和元素相关的offsetParent,offsetTop,offsetLeft,offsetWidth,offsetHeight

1. offsetParent:

   offsetParent:指返回距离当前元素最近的一个带有定位属性的元素或者最近的 table,td,th,body元素,当元素的display:none时,则值为null;

2. offsetTop,offsetLeft:

   offsetTop:从元素的上外边框到offsetParent元素的上内边框的距离
   offsetLeft:从元素的左外边框到offsetParent元素的左内边框的距离

3. offsetWidth,offsetHeight:

   offsetWidth:返回元素的宽度,计算公式为border+padding+content;
   offsetHeight:与之同理

• 和鼠标坐标相关的offsetX,offsetY

1. offsetX,offsetY

   offsetX:鼠标距离当前元素(绑定事件的元素)左内边框的距离;
   offsetY:鼠标距离当前元素(绑定事件的元素)上内边框的距离

page系列

page系列没有和元素相关的,只有两个和鼠标坐标相关的属性pageX,pageY

1. pageX,pageY

   pageX: 鼠标距离页面文档顶部的距离(包括被卷去的距离)
   
   pageY: 鼠标距离页面文档左边的左立(包括被卷去的距离)

client系列

• 和元素相关的 clientTop,clientLeft,clientWidth,clientHeight

1. clientTop,clientLeft

   clientTop:元素的上边框的高度
   
   clientLeft: 元素的左边框的宽度
   

2. clientWidth,clientHeight

   clientWidth: 计算元素的宽度,计算公式为padding+centent,
   
   clientHeight: 计算元素的高度,计算公式为padding+centent,
   

• 和鼠标坐标相关ClientX, ClientY

1. clientX,clientY

   clientX: 鼠标距离页面可视区(除去页面顶部工具栏)顶部的高度(不包括被卷去的部分)
   
   clientY: 鼠标距离页面可视区(除去页面顶部工具栏)顶部的宽度(不包括被卷去的部分)

scroll系列

• 和元素相关的scrollTop,scrollLeft,scrollWidth,scrollHeight

1. scrollTop,scrollLeft

   scrollTop: 元素自身上下滚动条滚动的距离(并不是页面滚动的距离)
   
   scrollLeft: 元素自身左右滚动条滚动的距离(并不是页面滚动的距离);

2. scrollWidth,scrollHeight

   scrollWidth: 元素实际的宽度,计算公式为content+padding+scrollLeft的最大值
   
   scrollHeight:元素实际的高度,计算公式为content+padding+scrollTop的最大值

• 和鼠标相关的scrollX,scrollY

1. scrollX,scrollY

   scrollX: 鼠标在电脑屏幕内的X坐标
   
   scrollY: 鼠标在电脑屏幕内的Y坐标