element.className:类名样式操作
- 如果样式较多,可以采取操作类名的方式更改元素样式。
- class因为是保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类型,会覆盖原先的类名
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.change { 【定义的类】
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<!-- element.className:类名样式操作 -->
<!-- 如果样式较多,可以采取操作类名的方式更改元素样式。
class因为是保留字,因此使用className来操作元素类名属性
className会直接更改元素的类型,会覆盖原先的类名 -->
<script>
var div = document.querySelector("div");
div.onclick = function() {
this.className = "change" 【覆盖原先类型】
this.className = "first change" 【first change会保留原先类名】
}
</script>