求助：为什么我的js背景颜色就改不了呢

最新推荐文章于 2022-10-20 16:51:21 发布

float11111

最新推荐文章于 2022-10-20 16:51:21 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：求助前端代码 js 文章标签：前端代码

本文链接：https://blog.youkuaiyun.com/float11111/article/details/83048863

求助同时被 3 个专栏收录

1 篇文章

订阅专栏

前端代码

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了一段JS代码中背景颜色无法更改的问题，通过详细分析代码结构与执行流程，指出问题所在并提供解决方案，适用于前端开发者及对JS有兴趣的技术人员。

求助：为什么我的js背景颜色就改不了呢

求大神帮忙解决一下，谢谢大神了
简述：这是一个改变宽、高、以及背景颜色的盒子，宽高的改变没有问题，但是背景颜色无法改变，原因未知。
以下是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
	<meta name="Keywords" content="js练习"/>
	<meta name="Description" content="js4节课练习总结"/>
	
	/* css基本的边框背景，宽高，手指特效*/
	<style type="text/css">
		body div{margin: 0px;padding: 0px;}
		#box {width: 100px;height: 100px;background-color: aliceblue;border: red solid 1px;}
		#cover {width: 100%;height: 100%;top: 0;left: 0	;background: rgba(0,0,0,0.5);position: fixed;display: none;}
		#set {width: 300px; height: 200px;background-color: aliceblue; position: absolute;left:50%;top:50%;margin-left: -150px;margin-top: -100px;font-size: 14px;font-family: 'Microsoft yahei';	}
		#set p{height: 40px;line-height: 40px;}
		#set p font{margin-left: 10px;}
		#set p span{margin-left: 10px;cursor: pointer;}
		#set #p1 span{display: inline-block;width:  30px;height: 15px;margin-left: 15px;	}
	</style>
	/*js代码，第一个命名*/
	<script type="text/javascript">
	window.onload=function(){
		
		var oBtn = document.getElementById('btn');
		var oCover = document.getElementById('cover');
		var oDone = document.getElementById('done')
		var oBox = document.getElementById('box');
		var oSpan = document.getElementsByTagName('span')
	
		
		oBtn.onclick=function(){
			oCover.style.display='block';
		};
		
		oDone.onclick=function(){
			oCover.style.display='none';
		};
		
		/*将代码优化了下*/
			oSpan[0].onclick = s1;
			oSpan[1].onclick = s1;
			oSpan[2].onclick = s1;

			oSpan[3].onclick = s2;
			oSpan[4].onclick = s2;
			oSpan[5].onclick = s2;

			oSpan[6].onclick = s3;
			oSpan[7].onclick = s3;
			oSpan[8].onclick = s3;


			function s3(){
				oBox.style.height = this.innerHTML;
			};
			
			function s2(){
				oBox.style.width = this.innerHTML;
			};
	/*问题主要出在这，为什么背景颜色不改变呢*/		
			function s1(){
				oBox.style.background = this.style.background;
			};
		
	};
	</script>
</head>

<body>
	<div id="box"></div>
	<button id="btn">确认</button>
	<div id="cover">
		<div  id="set">
			<p id="p1">
			<font>背景:</font>
				<span style="background-color: red"></span>
				<span style="background-color: blue"></span>
				<span style="background-color: green"></span>
			</p>
			<p id="p2">
				<font>宽度:</font>
				<span>100px</span>
				<span>200px</span>
				<span>300px</span>
			</p>
			<p id="p3">
			<font>高度:</font>	
				<span>100px</span>
				<span>200px</span>
				<span>300px</span>
			</p>
			<button id="done" style="margin-left: 45%">完成</button>
		</div>
	</div>
	
</body>
</html>