改变背景和字体颜色

最新推荐文章于 2022-05-11 19:40:52 发布

帅帅的Python

最新推荐文章于 2022-05-11 19:40:52 发布

阅读量383

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42060598/article/details/83832512

版权

7 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<title>第二题</title>
	</head>
	<style type="text/css">
	#d1{width: 100px;height: 100px;margin-top: 20px; background:red;text-align: center;
	line-height: 100px;color: black;}
	#p1{display: block;}

	</style>
	<body>
	<input type="button" id="b1" value="修改背景颜色">
	<input type="button" id="b3" value="显示隐藏文字">
	<input type="button" id="b2" value="改变文字颜色">

	<div id="d1"> <p id="p1">生而无畏</p></div>
	</body>
	</html>
	<script type="text/javascript">
	// 获取标签对象
	var oButton1=document.getElementById('b1');
	var oButton2=document.getElementById('b2');
	var oButton3=document.getElementById('b3');
	var oDiv = document.getElementById（'d1'）;
	var op = document.getElementById（'p1'）;
	//改变div背景颜色
	oButton1.onclick =函数（）{
	if（oDiv.style.background =='yellow'）{
	oDiv.style.background = '红';
	}其他{
	oDiv.style.background = '黄色';
	};
	};
	//改变文字颜色
	oButton2.onclick =函数（）{
	if（oDiv.style.color =='white'）{
	oDiv.style.color = '黑';
	}其他{
	oDiv.style.color = '白色';
	};
	};
	//显示隐藏文字
	oButton3.onclick =函数（）{
	if（op.style.display ==“none”）{
	op.style.display = '块';
	}其他{
	op.style.display = '无';
	};
	};
	</ SCRIPT>

关注