第6章 DOM（上）-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 16 第6章补充案例 【案例6-1】网页开关灯 一、案例描述 考核知识点 DOM对象、操作元素属性 练习目标 掌握DOM对象的概念。 掌握操作元素属性的方法。 需求分析 在DOM（文档对象模型）中，可以使用JavaScript来操作一个元素的HTML属性。本案例将完成对文档中document.body元素的背景色操作。 案例分析 效果如图7-1、7-2所示。 初始页面 单击“开关灯”后 具体实现步骤如下： 在页面编写按钮元素button。 在button中，给button元素设置id=btn。 给按钮设置onclick()单击事件。 定义flag变量，控制背景色的切换状态。 通过if…else语句设置body背景色，修改flag状态的值。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： button?id=btn开关灯/button 2、添加JavaScript效果 添加JavaScript效果，具体代码如下： script type=text/javascript ????var?btn?=?document.getElementById(btn); ????var?flag?=?0; ????btn.onclick?=?function()?{ ????????if?(flag?==?0)?