BOM

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样式声明对象

你可能感兴趣的:(BOM)