3-13 编程练习
小伙伴们,今天我们学习了onchange鼠标事件,根据gif图,补充代码,实现下列功能:
(1) 选择下拉列表中不同的选项,页面中的div就设置成不同的背景颜色,div中的内容也发生变化。
比如:选择黄色选项,div的背景颜色就变为黄色,文本内容就变为“我的背景颜色变成了yellow色”
(2)当选择下拉列表中的“请选择”时,div的背景颜色变成白色,文本变为“我没有发生任何变化”
gif图如下:
任务
根据gif效果图完成下列步骤:
第一步:先写出 “页面元素加载完成后触发的事件”,后面跟上要执行代码的函数名
第二步:写出页面元素加载完成后触发事件所执行函数中的脚本,脚本如下:
(1) 通过id获取元素的方式得到下拉列表对象和div元素对象
(2) 给下拉列表绑定选项发生变化时触发的事件,事件触发的函数执行代码如下:
-
当下拉列表的选项发生变化时,div的背景颜色也跟随发生相应的变化,div背景颜色与下拉列表的value值一致,文本内容随之变化为:“我的背景颜色变成了…”
-
如果下拉列表的value值是0时,div的背景颜色设置为白色,文本内容设置为“我没有发生任何变化”
任务提示
因脚本写在head标签中,下拉列表和div元素写在body标签中,为了能够获取到这些元素,故要用页面元素加载完成后触