使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色

2022-07-28,,,,

查看本章节

查看作业目录


需求说明:

根据在下拉列表框中选择的内容,决定页面效果

用户在下拉列表框中选择页面将 要使用的背景颜色

当用户选择橙色时,页面背景将显示为橙色

实现思路:

  1. 用表单 <select> 元素列出可以选择的背景颜色
  2. 在 JavaScript 脚本中设置 <select> 元素对象的 onchange 事件属性,让 onchange 事件属性值等于处理该事件的匿名函数
  3. 在匿名函数内部获取 <select> 元素的选项值,并设置为页面背景色 使用浏览器预览效果

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>请选择背景颜色:</h1>
		<select id="setColor" >
			<option value="white">白</option>
			<option value="purple">紫</option>
			<option value="orange">橙</option>
			<option value="gray">灰</option>
			<option value="yellow">黄</option>
		</select>
		<script type="text/javascript">
			document.getElementById("setColor").onchange = function(){
				document.bgColor=this.value;
			}
		</script>
	</body>
</html>

 

本文地址:https://blog.csdn.net/weixin_44893902/article/details/109336875

《使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色.doc》

下载本文的Word格式文档,以方便收藏与打印。