改變背景顔色

今天講的内容是如何改變網頁的顔色。首先先看一下架構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的背景顔色換成小方框裡的那個顔色，這裡要注意的就是紅色橫線上的書寫。