css 切换主题

css 切换主题_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			:root {
				--com-bg: #ddd;
				--com-color: #333;
			}
			body {
				width: 100%;
				height: 60vh;
			}

			.div {
				height: 200px;
				color: var(--com-color);
				background: var(--com-bg);
			}
		</style>
	</head>
	<body>
		<div class="div">
			<p>颜色字体</p>
		</div>
		<div onclick="test1('#000','#ccc')">
			切换黑色
		</div>
		<div onclick="test1('#ddd','#333')">
			切换白色
		</div>
	</body>
	<script>
		function test1(bg, color, ) {
			let dom = document.querySelector('.div');
			dom.style.setProperty("--com-bg", bg);
			dom.style.setProperty("--com-color", color);
		}
	</script>
</html>

你可能感兴趣的:(css,前端)