javascript之DOM操作CSS

最新推荐文章于 2025-06-15 14:13:34 发布

原创最新推荐文章于 2025-06-15 14:13:34 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用DOM操作CSS样式的简单实例。通过JavaScript获取页面中id为'box'的元素，并在该元素被点击时改变其文字颜色为红色。此例展示了如何结合HTML、CSS与JavaScript实现动态样式变化。

DOM操作CSS：基本语法：document.getElementById("id名称”).style.属性 = "属性值"。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<div id="box">这是一个盒子</div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		box.onclick = function(){
			box.style.color = "red";
		}
	</script>
</body>
</html>