BOM核心——window对象之窗口

theme: channing-cyan

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

window是什么

浏览器对象模型BOM（Browser，Object，Model）是以window对象为基础的，这个对象代表了浏览器窗口，页面可视区域，它还被复用为Es的全局对象Global，所有的原生类型的构造函数和函数都从一开始就存在于这个对象之上。

窗口位置

window的位置可以通过不同的属性和方法来定义，我们可以使用moveTo(),moveBy()方法移动窗口，这俩个方法都接收俩个参数。

moveTo是接收要移动位置的坐标x和y。

moveBy是接收当前位置在这俩个方向上移动的像素值。

窗口大小

所有浏览器都支持四个窗口大小的属性。

outerWidth，outerHeight是浏览器窗口自身的大小，就是我们当前浏览器的大小。

innerWidth,innerHeight是浏览器窗口中页面视口的大小，不包含我们的调试工具栏还有浏览器边框。

这个还挺实用的，我们可以通过媒体查询来设置响应式，但有时候我们列表需要通过页面视口的宽度来判断是不是切换俩个还是切换四个，然后实现新闻列表的切换，我们在js肯定是要判断浏览器窗口大小的。这个我在实际项目中就遇到过，非常有印象。

再提一点我们还可以使用resizeTo(),resizeBy()来调整窗口大小，但是这个用的不是很多，一般我们不会去主动调这个的，毕竟显示给用户的，如果我们设置个定时器让窗口自己变，那用户可能会砸电脑。

视口位置

我们浏览网页的时候肯定不可能一下子全部显示完，都需要用滚轮来往下翻动。 我们可以使用 scroll(),scrollTo(),scrollBy()方法滚动页面，这三个方法都接收俩个参数，x和y。scroll和scrollTo表示的是要滚动的坐标，scrollBy表示滚动的距离。还是写一下把。

    // 相对于当前视口向下滚动 80 像素
    window.scrollBy(0, 80);
    // 相对于当前视口向右滚动 40 像素
    window.scrollBy(40, 0);
    // 滚动到页面左上角
    window.scrollTo(0, 0);
    // 滚动到距离屏幕左边及顶边各 80 像素的位置
    window.scrollTo(80, 80);

这个也挺有用的，尤其手机端，我们需要网页头部的一直显示在页面顶部，一到网页顶部头部背景颜色是透明的，滚动后背景颜色变成白色，就可以通过js来判断，让它移动到一定位置的时候背景颜色改变。