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

最新推荐文章于 2023-03-29 10:00:39 发布

明金同学

最新推荐文章于 2023-03-29 10:00:39 发布

阅读量4.9k

点赞数 29

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

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

版权

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

32 篇文章 21 订阅

订阅专栏

查看本章节

查看作业目录

需求说明：

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

实现思路：

在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色
在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性
在 <select> 节点下加入多个 <option> 节点，将 <option> 节点的值设置为不同的颜色值。在 <option>节点下加入文本节点，分别显示不同的颜色
设置 <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>

明金同学

关注

29
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
16
评论
使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

查看本章节查看作业目录需求说明：使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色实现思路：在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性在 <select&gt
复制链接

扫一扫