Dom中的视图模式属性（视图宽高，元素位置，滚动高度，尺寸属性）

前言：一直对浏览器的各种宽度，滚动距离是否包括菜单栏，滚动条之类的问题混杂不清，今天通过借鉴网上的一些资料，来通过总结，学习这些视图属性，便于自己之后的学习了解。
一. window视图属性 浏览器窗口可视区域大小
1 innerWidth 属性和innerHeight 属性
不包括菜单栏、工具栏以及滚动条等的高度（只读属性）
innerHeight：获取window窗体的内部高度

innerWidth ：获取window窗体的内部宽度

2.outerWidth属性和outerHeight属性
outerWidth/outerHeight表示整个浏览器窗体的大小，包括任务栏等。

总结：


innerHeight、outerHeight、innerWidth、outerWidth
window.innerHeight
浏览器窗口高度，如果存在水平滚动条，则包括滚动条
只读属性，没有默认值，不支持的浏览器则是undefined
window.innerWidth
浏览器窗口宽度，如果存在垂直滚动条，则包括滚动条
只读属性，没有默认值，不支持的浏览器则是undefined
window.outerWidth
浏览器窗口整个宽度，包括侧边栏，窗口镶边和调正窗口大小的边框
只读属性，没有默认值，不支持的浏览器则是undefined
window.outerHeight
浏览器窗口整个高度，包括窗口标题、工具栏、状态栏等
只读属性，没有默认值，不支持的浏览器则是undefined

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

注意：IE8及以下版本不支持window.innerHeight和window.innerWidth等属性。
对于不支持window.innerHeight等属性的浏览器中，可以读取documentElement和body的高度。最佳方式为以上所述

document.documentElement.clientHeight和document.body.clientHeight的区别：

document.documentElement.clientHeight：不包括整个文档的滚动条，但包括元素的边框。
document.body.clientHeight：不包括整个文档的滚动条，也不包括元素的边框，也不包括的边框和滚动条（经过测试该属性在浏览器中的取值无效，始终为0）
二 window对象获取整个页面滚动的像素值
1 pageXOffset和pageYOffset
表示整个页面滚动的像素值（水平方向的和垂直方向的）（只读属性）

注意：因为滚动条滚动的比例与页面滚动的比例不一致。所以在查看距离时不能根据测量滚动条的位置判断距离，而是发生滚动时隐藏的页面的高度。（页面上方不可见宽度）

总结：
window.pageXOffset
返回文档在水平方向滚动的像素值
只读属性，没有默认值，不支持的浏览器则是undefined
pageXOffset是scrollX的别名

window.pageYOffset
返回文档在垂直方向已滚动的像素值
只读属性，没有默认值，不支持的浏览器则是undefined
pageYOffset是scrollY的别名

window.pageXOffset == window.scrollX; // 总是 true
window.pageYOffset == window.scrollY; // 总是 true

三 screen视图属性
1 window对象获取浏览器窗口在显示器中的位置(不固定)
1） screenX and screenY
浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置。
window.screenX 浏览器窗口在显示器中的水平位置 不支持的浏览器则是undefined
window.screenY 浏览器窗口在显示器中的垂直位置 不支持的浏览器则是undefined

2）window.screenLeft和window.scrennTop
(随着浏览器窗口发生变化,浏览器窗口相对屏幕的位置)
window.screenLeft 浏览器可用空间左边距离屏幕（系统桌面）左边界的距离 不支持的浏览器则是undefined
window.screenTop 浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离 不支持的浏览器则是undefined

自己测试：

总结：但是经过实际测验发现screenTop(screenLeft)的值与screenY（screenX）的值一般是相同，可以替换使用。

2 测量显示器screen宽高属性（固定）
1）window.screen.height
显示器屏幕的高度，包括工具栏、状态栏等。

2）window.screen.width
显示器屏幕的宽度，包括工具栏、状态栏等。

3）window.screen.availHeight
浏览器窗口在屏幕上可占用的高度。
即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

4）window.screen.availWidth
浏览器窗口在屏幕上可占用的宽度
即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ：可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。

注意：这两个值一般是固定值，只与电脑的屏幕有关，与页面大小无关
自己测试：



四 前面介绍的都是关于window的相关宽高，这里来补充介绍一下document
document和window的区别：
window对象表示浏览器中打开的窗口
document对象是window对象的一部分，不包括菜单栏
1.与client相关的宽高
document.body.clientWidth
document.body.clientHeight
document.body.clientTop
document.body.clientLeft
2.与offset相关的宽高
document.body.offsetWidth
document.body.offsetHeight
document.body.offsetLeft
document.body.offsetTop
3.与scroll相关的宽高
document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

五 元素视图属性
1.与client相关的宽高（可视区域）

1. clientWidth clientHeight
   无padding无滚动轴
   clientWidth=style.width
   有padding无滚动轴
   clientWidth：padding+content
   有padding有滚动轴：padding+content-scroll（滚动轴宽度）
   
   总结文档可视区的高宽，包括padding，content，不包括滚动条，margin，边框，不可见区域
2. clientLeft和clientTop
   用来读取元素的border宽度和高度，若无border则为0；
   clientLeft=boder-top的border-width
   clientTop=border-left的border-width
   2.与offset相关的宽高
   1)offsetWidth offsetHeigh
   元素的border+padding+content的宽度和高度
   只读 只和本来设定的border 以及width和height有关，与超出元素的内容大小无关
   总结
   无滚动 无padding 无border
   offsetWidth=clientWidth=style.width
   有padding 无滚动 有border
   offsetWidth=content+padding+border=clientWidth+border
   有padding，有滚动 有border
   offsetWidth=content+padding+border=clientWidth+滚动条+border
   
3. offsetLeft 和offsetTop
   offsetParent
   如果当前元素的父级元素没有进行css定位（absolute relative），offsetParent为body
   如果当前元素的父级元素有css定位，offsetParent取最近的父元素
   不同浏览器下。offsetLeft的取值不同
   IE8/9/10 谷歌
   offsetLeft=offsetParent（padding-left+margin-left+border）+当前元素的（margin-left）
   FireFox
   offsetLeft=offsetParent（padding-left+margin-left）+当前元素的（margin-left）
   在IE6/7中
   offsetLeft=offsetParent的padding-left+当前元素的margin-left
   file:///C:/Users/Administrator/Desktop/test/event.html
   3）scroll
   body的scrollWidth和scrollHeight
   1 给定宽高小于浏览器大小时 scrollWidth和scrollHeight表示浏览器大小的宽度高度,不包括工具栏
   body{
   width:500px;
   height:350px;
   border:1px solid red;
   overflow:auto;
   }
   alert(document.body.scrollWidth);//1326
   alert(document.body.scrollHeight);//605
   
   2 给定宽高大于浏览器大小，内容小于给定宽高
   scrollWidth=给定的宽度+padding2+margin2+border2
   scrollHeight=给定的高度+padding2+margin2+border2
   3 给定宽高大于浏览器大小且内容大于给定宽高
   scrollWidth=内容宽度+其所有的margin1 padding1 border*1
   scrollHeight=内容高度+其所有的margin padding border

元素的scrollWidth和scrollHeight
无滚动条
scrollWidth=clientWidth=style.width+style.padding2
有滚动条
scrollWidth==实际内容的的宽度+padding2
scrollHeight==实际内容的高度+padding*2

scrollLeft和scrollTop 还需要查找资料
可读写属性
当元素其中的内容超过其高宽时，元素被卷起的高度和宽度

style.wdith和style.height是元素css中设置的宽度和高度

document 文档元素
document.documentElement（html）
document.body
documentElement和body是父子级关系

测试document.documentElement.clientHeight和document.body.clientHeight
body不设置宽高时二者相等，为可视区域的大小
body设置宽高时 document.documentElement.clientHeight的值=body的height+body的padding*2
body{
margin:0px;
padding:40px;
height:350px;
}