使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

时间：2022-02-24 15:07:44

查看本章节

查看作业目录

需求说明：

使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

实现思路：

  1. 在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色
  2. 在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性
  3. 在 <select> 节点下加入多个 <option> 节点，将 <option> 节点的值设置为不同的颜色值。在 <option>节点下加入文本节点，分别显示不同的颜色
  4. 设 置 <select> 节 点 的 onchange 事 件， 在 onchange 事 件 中 使 用 document 对 象 的 bgColor 属 性 和fgColor 属性设置文档的背景颜色和字体颜色

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<h1>更改字体颜色和背景颜色</h1>

		<select id="sel">

			<option value="bule">蓝色</option>

			<option value ="red">红</option>

			<option value="pink">粉</option>

			<option value="purple">紫</option>

			<option value="grend">绿</option>

			<option value="yellow">黄</option>

			<option value="orange">橙</option>

		</select>

		<script type="text/javascript">

			document.getElementById("sel").onchange=function(){

				document.bgColor=this.value;

				document.fgColor=this.value+255;

			};

		</script>

	</body>

</html>

相关文章