需求说明:
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
实现思路:
在页面中添加 <select> 标签,用来显示颜色,并设置标签的 id 属性
在 <select> 标签下加入多个 <option> 标签,<option> 标签的值设置为不同的颜色值,如 blue。在<option> 标签下加入文本节点,分别显示不同的颜色,如蓝色
在页面中引入 jQuery 文件库
在页面框架下载完成后,使用 jQuery 中的 change() 方法对 <select> 标签的 change 事件进行绑定
获取 <select> 标签的选中值,并将其设置为页面 body 的背景色
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#sel").change(function(){ $("body").css("background-color",$("select").val()); }) }) </script> </head> <body> <select id="sel"> <option value="white">白色</option> <option value="yellow">黄色</option> <option value="orange">橙色</option> <option value="blue">蓝色</option> </select> </body> </html>