使用ClassName修改样式属性

最新推荐文章于 2024-05-27 21:16:16 发布

hcoke

最新推荐文章于 2024-05-27 21:16:16 发布

阅读量682

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/m0_62962469/article/details/123383824

版权

html javascript css

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			.change {
				background-color: purple;
				font-size: 25px;
				color: #fff;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="first">
			文本
		</div>
		<script type="text/javascript">
		//1.使用element.style获得修改元素样式 样式较小 功能简单的情况下使用
			var text = document.querySelector('div');
			text.onclick = function() {
				// this.style.backgroundColor = 'purple';
				// this.style.color = '#fff';
				// this.style.fontSize = '25px';
				// this.style.marginTop = '100px';
				//2.我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
				this.className = 'change'; //在style标签内写好要产生变化后的样子，然后在这里修改类名即可
				//3. ClassName 会直接更改元素的类名，会覆盖原先的类名
			}
		</script>
	</body>
</html>

这里注意三点：

1.使用element.style(行内样式操作)获得修改元素样式样式较小功能简单的情况下使用

2.我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况

3. ClassName(类名样式操作) 会直接更改元素的类名，会覆盖原先的类名

4.如果想要保留原先的类可以使用多类名

this.className = 'change first';

操作元素总结：