offset系列与scroll系列

一、offset系列：

offsetHeight与offsetWidth

offsetHeight与offsetWidth ：

1.    获取的是元素真实的高度和宽度
2.    获取到的是数值类型，方便计算
3.    offsetHeight与offsetWidth是只读属性，不能设置。

offsetHeight:元素在垂直方向上占用的空间的大小，以像素记。包括元素的高度、上边框的高度、下边框高度。

offsetWidth :元素在水平方向上占用的空间的大小，以像素记。包括元素的宽度、左边框的宽度、右边框的宽度。

 

offsetParent

parentNode和offsetParent ：

1. parentNode始终是父元素
2. offsetParent是离当前元素最近的定位元素(absolute、relative)，如果没有，那就找body

 

offsetLeft与offsetTop

offsetLeft: 自身左侧到offsetParent左侧的距离

offsetTop:自身顶部到offsetParent顶部的距离 :

1.    元素自身与offsetParent真实的距离
2.    获取到的是数值类型，方便计算
3.    只读属性，只能获取，不能设置

 

 

二、scroll系列

scrollHeight:在没有滚动条的情况下，元素内容的总高度

scrollWidth:在没有滚动条的情况下，元素内容的总宽度

scrollLeft：被隐藏在内容区域左侧的像素数，也就是滚动条水平方向的位置。

scrollTop：被隐藏在内容区域上方的像素数，也就是滚动条垂直方向的位置。

获取整个window的滚动条的距离：

第一种方法（推荐）：

window.onscroll = function(){
          window.pageXOffset;// 水平方向上的距离
          window.pageYOffset;// 垂直方向上的距离
        }

第二种方法： 

window.onscroll = function(){
          document.documentElement.scrollTop;// 垂直方向上的距离
          document.documentElement.scrollLeft;// 水平方向上的距离
        }