【案例1-8】改变网页皮肤
一、案例描述
- 考核知识点
onclick()事件
- 练习目标
- 掌握onclick()点击事件。
- 了解document对象。
- 需求分析
实现单击网页中的按钮改变网页的皮肤颜色。
- 案例分析
- 打开页面时，效果如图1-10所示。
- 改变背景色之前
当点击“设为蓝色”按钮后，查看网页的皮肤变化，效果如图1-11所示。
- 改变蓝色之后
- 具体实现步骤如下：
- 设置4个button按钮，并绑定点击事件οnclick="color('参数')"。
- 编写js代码，定义color()方法。
、二、案例实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>改变网页皮肤</title>
- </head>
- <body>
- <button value="设为红色" οnclick="color('red')">设为红色</button>
- <button value="设为黄色" οnclick="color('yellow')">设为黄色</button>
- <button value="设为蓝色" οnclick="color('blue')">设为蓝色</button>
- <button value="设为绿色" οnclick="color('green')">设为绿色</button>
- <script type="text/javascript">
- function color(e){
- document.body.style.backgroundColor = e
- }
- </script>
- </body>
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
