通过JavaScript设置类class

最新推荐文章于 2024-05-06 18:17:39 发布

原创最新推荐文章于 2024-05-06 18:17:39 发布 · 950 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #前端

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态改变HTML元素样式的简单方法。通过为元素添加类名，可以轻松实现背景颜色的更改，展示了如何结合HTML、CSS和JavaScript进行网页互动效果的设计。

效果展示

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.redBackground{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<label id="showText">显示的文字</label>
		<button type="button" onclick="changeRed();">红色背景</button>
		<script type="text/javascript">
			function changeRed(){
				// className即是设置类名
				document.getElementById("showText").className="redBackground";
			}
		</script>
	</body>
</html>