BOM 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
window
BOM 的核心是window对象,所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法。
window对象属性
window.innerHeight属性,window.innerWidth属性
这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素。
scrollX、scrollY
- scrollX:滚动条横向偏移
- scrollY:滚动条纵向偏移
这两个值随着滚动位置变化而变化,
scrollTo、scrollBy、scroll
我们可以通过方法scrollTo或者scroll方法改变滚动条位置到指定坐标。
window.scrollTo(0, 300); // 滚动条移动到300px处
两个参数分别是水平、垂直方向偏移。
scrollBy可以相对当前位置移动滚动条,而不是移动到绝对位置。
scrollBy(0, 100) 滚动条下移100px
navigator
Window对象的navigator属性,指向一个包含浏览器相关信息的对象。navigator.userAgent属性返回浏览器的User-Agent字符串,用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。
navigator.userAgent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36"
screen
显示设备的高度,单位为像素
screen.height
显示设备的宽度,单位为像素
screen.width
window.getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象