【学习打卡】第14天 浏览器窗口和网页尺寸相关参数

课程名称：JavaScript进阶篇

课程章节： DOM对象，控制HTML元素

主讲老师：慕课官方号

课程内容：

今天学习的内容包括： 不同浏览器如何获取浏览器窗口的可视化区域(clientHeight、clientWidth)以及获取网页内容高度和宽度(offsetHeight、offsetWidth)。网页卷去的距离与偏移量的获取(scrollLeft、scrollTop、offsetLeft、offsetTop)。

课程收获：

浏览器窗口可视区域大小是获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条），对于不同浏览器获取的方法不同，其中对于IE9+、Chrome、Firefox、Opera 以及 Safari，浏览器窗口的内部高度通过window.innerHeight来获取，浏览器窗口的内部宽度通过window.innerWidth来获取。对于 Internet Explorer 8、7、6、5来说，document.documentElement.clientHeight用来表示HTML文档所在窗口的当前高度。document.documentElement.clientWidth用来表示HTML文档所在窗口的当前宽度。如果相对于body的话，我们使用document.body.clientHeight和document.body.clientWidth去获取。

scrollHeight和scrollWidth，分别用来获取网页内容高度和宽度。不同浏览器中表现不同，如果是在IE、Opera中scrollHeight是网页内容实际高度，可以小于 clientHeight。如果是在NS、FF中scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。我们需要注意的是这些是区分大小写的。

offsetHeight和offsetWidth，分别表示获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。其中offsetHeight 等于 clientHeight + 滚动条 + 边框。

scrollLeft用来设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop用来设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft用来获取指定对象相对于版面或由 offsetParent属性指定的父坐标的计算左侧位置 。
offsetTop用来获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。我们需要注意的是这些都是严格区分大小写。
offsetParent表示布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

今天学习的DOM对象，控制HTML元素的9-18到9-22，共5个小结，花费了45分钟，学到了不同浏览器中我们文档在窗口的位置以及浏览器的窗口大小。还可以获取通过scrollHeight和scrollWidth网页内容的高度和宽度。利用这些我们可以实现子元素弹出框在父元素的下面，以及我们计算拖拽的范围。