使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换

简介: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换

需求说明:


使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换


60.png


实现思路:


在页面中添加 <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>
相关文章
|
12月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
80 0
|
12月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
80 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
55 0
|
2月前
|
JSON JavaScript 前端开发
jQuery下拉框搜索模糊查询实现
【9月更文挑战4天】
104 10
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
34 2
|
4月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
4月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
6月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框