如何动态改变css样式

如何动态改变css样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>如何动态改变css样式</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		div {
			margin: 0 auto;
			width: 500px;
			height: 300px;
			line-height: 300px;
			text-align: center;
		}
		.red{
			background-color: red;
		}
		.blue {
			background-color: blue;
		}
		button {
			width: 100px;
		}
	</style>
</head>

<body>
	<div class="red">
		<button onclick="hello()">改变背景颜色</button>
	</div>

	<script type="text/javascript">
		function hello() {
			// 直接选中div，不会因为class变化找不到元素
			let box = document.querySelector("div");
			
			if(box.className === "blue"){
				box.className = "red";
			}else{
				box.className = "blue";
			}
		}
	</script>
</body>
</html>
posted @ 2026-07-08 17:09  碰一下猫猫头  阅读(4)  评论(0)    收藏  举报