改变网页皮肤-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第1章-课后作业)

【案例1-8】改变网页皮肤

一、案例描述

1. 考核知识点

onclick()事件

1. 练习目标

• 掌握onclick()点击事件。
• 了解document对象。

1. 需求分析

实现单击网页中的按钮改变网页的皮肤颜色。

1. 案例分析

1. 打开页面时，效果如图1-10所示。

 

1. 改变背景色之前

当点击“设为蓝色”按钮后，查看网页的皮肤变化，效果如图1-11所示。

1. 改变蓝色之后

1. 具体实现步骤如下：

1. 设置4个button按钮，并绑定点击事件οnclick="color('参数')"。
2. 编写js代码，定义color()方法。

、二、案例实现

根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：

4.     
5.     
8.   设为红色"  οnclick="color('red')">设为红色
9.   设为黄色"  οnclick="color('yellow')">设为黄色
10.   设为蓝色"  οnclick="color('blue')">设为蓝色
11.   设为绿色"  οnclick="color('green')">设为绿色
12.   
13.