使用 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>
相关文章
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
117 0
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
109 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
78 0
|
5月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
50 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
5月前
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
67 2
|
5月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
64 0
|
7月前
|
JSON JavaScript 前端开发
jQuery下拉框搜索模糊查询实现
【9月更文挑战4天】
182 10
|
8月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
75 2
|
9月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
8月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
47 0