当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色

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

2020年10月30日  | 移动技术网IT编程  | 我要评论
查看本章节查看作业目录需求说明:根据在下拉列表框中选择的内容,决定页面效果用户在下拉列表框中选择页面将 要使用的背景颜色当用户选择橙色时,页面背景将显示为橙色实现思路:用表单 <select> 元素列出可以选择的背景颜色在 JavaScript 脚本中设置 <select> 元素对象的 onchange 事件属性,让 onchange 事件属性值等于处理该事件的匿名函数在匿名函数内部获取 <select> 元素的选项值,并设置为页面

查看本章节

查看作业目录


需求说明:

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

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

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

实现思路:

  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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网