4.2 为按钮添加背景颜色

在HTML DOM对象中，定义有一个Style对象，用于表示风格样式，绝大多数的页面元素均可以通过该对象来定义风格样式。在Style对象中，定义了一个backgroundColor属性，表示元素的背景颜色。如果将backgroundColor属性应用于按钮<button>元素，就可以为按钮控件添加各种背景颜色了。

下面简单介绍一个JavaScript通过backgroundColor属性为按钮控件添加背景颜色的代码实例。

关于【代码4-1】的说明：

● 第14～16行代码通过<button>标签定义一组按钮，后面将为这组按钮定义不同的背景颜色。

● 第20行代码定义了一个数组（colorBtn），分别定义了3种颜色（"red"，"yellow"和"blue"）。

● 第21行代码获取了按钮对象集合（arrBtn）。

● 第22～24行代码通过一个for语句依次为按钮对象（arrBtn[i]）定义背景颜色（colorBtn[i]），具体就是通过Style对象的backgroundColor属性来操作的。

由于书籍印刷的原因，这里就不给出页面效果图了。按钮控件的背景颜色效果，读者可以自行运行源代码测试查看。