点击一个div改变颜色

主体就是设置一个div,然后给他设置一个颜色
再在css里设改变的颜色
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery.js"></script>
		<style>
		//div的形状
			.change{
				position: relative;
				margin: 0;
				padding: 0;
				background-color: #00FFFF;
				width: 500px;
				height: 500px;
				position: relative;
				left: 50%;
				top: 50%;
				margin: -250px 0 0 -250px;
				background: #3598db;
				border-radius: 50%;
			}
			//改变后的颜色
			.red{
				background-color: red;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class ="change"></div>
		<script type="text/javascript">
		$(function(){
			$("div").on("click",function(){
				$("div").toggleClass("red");
			});
		});
		</script>
	</body>
</html>

点击一个div改变颜色_第1张图片

你可能感兴趣的:(JavaScript)