使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
2024-08-30 00:49:09
查看本章节
查看作业目录
需求说明:
使用 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>
最新文章
- 世界国家 的数据库sql
- C/C++中产生随机数
- ASP.NET MVC 学习笔记(1)
- MVC Model Binder 规则
- The ToolStripMenuItem visible value always false
- table-cell完成左侧定宽,右侧定宽及左右定宽等布局
- MySQL的Master/Slave群集安装和配置
- Linux创建修改删除用户和组
- 13款Linux运维比较实用的工具
- 从零自学Hadoop(24):Impala相关操作上
- Python内置模块之subprocess
- 4.3 thymeleaf模板引擎的使用
- python中关于类隐藏属性的三种处理方法
- 22. Generate Parentheses C++回溯法
- 阿里云服务器 ECS Linux操作系统加固
- [z]nativeSql
- Could not load file or assembly &#39;Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91&#39; or one of its dependencies
- 用Emacs将文件加密保存
- 怎样在js中使用EL表达式
- boost bind使用指南