<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: green;
color: #ffffff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文版</div>
<script>
// 使用element.style获得修改元素样式,如果样式比较少或者功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function () {
// this.style.backgroundColor = 'green';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 当前元素的类名改为change
this.className = 'change';
// !!!!!!!!!!!!!!!!!!!!!className会直接更改元素类名。会覆盖之前所有的类名!!!!!!!!!!!!!!!!!!!
// this.className = 'first change';多类名用空格
}
</script>
</body>
</html>