需求说明:
根据在下拉列表框中选择的内容,决定页面效果
用户在下拉列表框中选择页面将 要使用的背景颜色
当用户选择橙色时,页面背景将显示为橙色
实现思路:
用表单 <select> 元素列出可以选择的背景颜色
在 JavaScript 脚本中设置 <select> 元素对象的 onchange 事件属性,让 onchange 事件属性值等于处理该事件的匿名函数
在匿名函数内部获取 <select> 元素的选项值,并设置为页面背景色 使用浏览器预览效果
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>请选择背景颜色:</h1> <select id="setColor" > <option value="white">白</option> <option value="purple">紫</option> <option value="orange">橙</option> <option value="gray">灰</option> <option value="yellow">黄</option> </select> <script type="text/javascript"> document.getElementById("setColor").onchange = function(){ document.bgColor=this.value; } </script> </body> </html>