使用 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>
相关文章
|
5月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
49 0
|
5月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
49 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
7月前
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
39 0
|
29天前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
8 0
|
5月前
|
JavaScript
jquery实现下拉框选中对应的div
jquery实现下拉框选中对应的div
30 0
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
51 0
|
4月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
5月前
|
移动开发 JSON JavaScript
七个帮助你处理Web页面层布局的jQuery插件
七个帮助你处理Web页面层布局的jQuery插件
42 0