改变页面背景色要从页面的 body 标签入手。body是一个大元素，页面的所有内容都以它为舞台并在其上尽情展现自我。那么，既然body是一个元素，JS就可以找到它，就和找到一个 div 一样简单：

let _body = document.querySelector('body');
/* console.log(_body); */

_body 是我们命名的变量，用以代表页面的 body 标签，也就是body元素。接着，我们从 document 对象即文档对象通过 querySelector 方法查询名为 'body' 的选择器（也就是标签名为 body 的元素），并将获得的值交给我们定义的变量 _body。为了验证是否真的找到，可以使用 console.log(_body); 指令在控制台查看效果。需要注意的是，querySelector 方法获得的标签（元素）是同名标签（元素）中的第一个。

找到了操作对象，下一步就是操作它。我们的任务是改变当前页面的背景色，这需要用到元素的 style 属性，该属性的 background-color 属性就是背景颜色，JS写作 元素.style.backgroundColor ：

_body.style.backgroundColor = '#ccc';

就酱简单！

当然，上方的控制台不仅可以设置当前页面的背景色，还能恢复初始背景色，如此可以确保我们的实验是无害的。这需要在改变背景色之前，先获得当前页面的背景色并保存下来，然后交由恢复按钮去操作。获得某一个元素的指定属性值，我们需要用到JS的一个 API ：window.getComputedStyle()，这将会拿到元素的CSS属性的对象集合，再通过 getPropertyValue() 取其 background-color 属性值即可。

前一篇: 练手：JS计算器
下一篇: CSS clip-path 简介