窗口视图

1.innerWidth：获取窗口的内部的宽度（包含滚轮内容）
innerHeight：获取窗口的内部的高度（包含滚轮内容）

console.log(window.innerWidth);
console.log(window.innerHeight);

2.documentElement.clientWidth/clientHeight：跟文档相关的，滚动条不属于文档内容（滚动条属于浏览器，属于窗口内容）

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

3.ele.clientWidth/clientHeight：整个盒子样式的大小：padding+contentWidth/contentHeight

var oBox = document.getElementById("box");
console.log(oBox.clientWidth);

4.ele.offsetWidth/offsetHeight：整个盒子占位大小：padding+border+contentWIdth/contentHeight

console.log(oBox.offsetWidth);

5.scrollWidth/scrollHeight：获取元素的padding+width/height，如果子元素超过父元素的宽高度时，会加上超出的宽高部

console.log(oBox.scrollHeight);

6.offsetTop/offsetLeft：获取ele到定位父级的top或left的距离，如果父级没有定位：距离marginLeft/marginTop + ele.left/ele.top

//获取元素的距离文档顶部的距离
function getOffset(ele){
  var obj = {
    left:0,
    top:0
  }
  while(ele !== document.body){
    obj.left += ele.offsetLeft + parseFloat(getStyle(ele.offsetParent).borderLeftWidth);
    obj.top += ele.offsetTop + parseFloat(getStyle(ele.offsetParent).borderTopWidth);
    ele = ele.offsetParent;
  }
  return obj;
  console.log(parseFloat(getStyle(ele.offsetParent).borderTopWidth));
}
console.log(getOffset(wrap).left);
function getStyle(obj){
  return obj.currentStyle || getComputedStyle(obj);
}

7.clientX/clientY：获取鼠标到文档可视区的左边、上边的距离
pageX/pageY：获取鼠标到文档顶部的左边、上边的距离（包括滚动条内容）

//e是形参，指示鼠标事件
document.onclick = function(e){
  e = e || window.event;//低版本IE下的兼容处理
  console.log(e);
  console.log(e.clientX);
  console.log(e.clientY);
  console.log(e.pageX);
  console.log(e.pageY);
  //pageX/pageY处理兼容的问题：
  //document.documentElement.scrollTop + e.clientY（文档的可视区坐标+被滚轮遮盖的内容坐标）
  console.log(document.documentElement.scrollTop + e.clientY);
}

8.onresize：触发事件改变窗口的大小

window.onresize = function(){
  console.log(document.documentElement.clientHeight);
  console.log(document.documentElement.clientWidth);
}