获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

$(window).width 屏幕可视区域的宽高，不包括滚动条与工具条
document.documentElement.clientWidth 屏幕可视区域的宽高，不包括滚动条与工具条。
window.innerWidth 获得可视区域的宽高，包含纵向滚动条的宽度，IE8和以下不支持
window.outerWidth 获得加上工具条与滚动条窗口的宽度，IE8和以下不支持
document.body.clientWidth 获得body内容的高度
offsetWidth 返回本身的宽高+padding+border+滚动条
offsetLeft 
1、相对于已定位元素的后代元素和一些其他元素，这些属性返回的坐标是相对于祖先元素
2、一般元素，则是相对于文档，返回的是文档坐标。
offsetParent属性指定这些属性所相对的父元素，如果offsetParent为Null，则这些属性都是文档坐标

function getElementPosition(e){
  var x=0;y=0;
   while(e!=null){
     x +=e.offsetLeft;
     y +=e.offsetTop;
     e = e.offsetParent;
    }
    return{x:x,y:y}
}

scrollWidth  content+padding+任何溢出内容的尺寸，所以如果没有溢出时，这些属性与clientWidth一致
scrollLeft 指定的是元素的滚动条的位置，可写，通过设置来让元素内容滚动

引用参考：https://segmentfault.com/a/1190000010746091