改变背景颜色

改变背景颜色

今天讲的内容是如何改变网页的颜色。首先先看一下框架HTML部分，请看以下截图。

接下来看一下这部分代码对应的样式，请看以下截图。

第二张截图就是第一张截图里的部分代码样式，大概就是给包裹它们大的那个div一些背景颜色、位置、高宽等样式。
第三张截图就是第一张截图里大的div里的小的div的样式，就是给6个小div各填上自己喜欢的颜色。设置了这些样式之后大概就是以下截图的样子。

根据上面的截图，我们最终要做到的动态是不管我们点击上面的哪一个颜色小方框，body的背景颜色都要换成那个小方框里的颜色。
接下来就是js部分，接下请看以下截图。

首先是先给大的那个名“box”的div加上一个id，名字可以自取。然后在HTML下面添加一个script标签，在这个标签里先写一个页面加载事件。如下截图。
接下来就是先获取到那6个小div。看以下截图。

我是先获取到“box”的div然后再获取里面的那6个小div，然后后面的“【0】”意思是第一个，就是在js的顺序“0”就是第一个、“1”就是第二个、“2”就是第三个……接下来就以此类推。
接下来就是给那6个小的div各绑定上一个点击事件。如下截图。

如上截图，给那6个小div各绑定上一个点击事件后，直接把body的背景颜色换成小方框里的那个颜色，这里要注意的就是红色横线上的书写。