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

最新推荐文章于 2022-06-28 13:55:06 发布

明金同学

最新推荐文章于 2022-06-28 13:55:06 发布

阅读量4.1k

点赞数 6

分类专栏： JavaScript交互式练习文章标签： html js vue java css

本文链接：https://blog.csdn.net/weixin_44893902/article/details/109633094

版权

JavaScript交互式练习专栏收录该内容

32 篇文章 21 订阅

订阅专栏

查看本章节

查看作业目录

需求说明：

使用 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>

明金同学

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用 jQuery 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换

查看本章节查看作业目录需求说明：使用 jQuery 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换实现思路：在页面中添加 <select> 标签，用来显示颜色，并设置标签的 id 属性在 <select> 标签下加入多个 <option> 标签，<option> 标签的值设置为不同的颜色值，如 blue。在<option> 标签下加入文本节点，分别显示不同的颜色，如蓝色在页面中引入
复制链接

扫一扫