课程名称: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
网页内容的高度和宽度。利用这些我们可以实现子元素弹出框在父元素的下面,以及我们计算拖拽的范围。