<body>
<style>
div{
width:50px;
height:50px;
background-color: red;
}
.style1{
background-color: #666;
text-align :center;
line-height: 3em;
font-size: 20px;
color: white;
}
.style2{
width:100px;
margin:0 auto;
height:100px;
background:#008c8c;
}
</style>
<div class="style1">文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
// 使用element.style 只适合样式修改较少的情况
// this.style.backgroundColor = '#444';
// this.style.textAlign = 'center';
// this.style.lineHeight = '3em';
// this.style.fontSize = '20px';
// this.style.color = 'white';
// 可以使用element.className 的方法先创建类样式设置到style中,再调用类名
// 如果要保留原类样式可以,输入多个类名
this.className = 'style1 style2';
}
</script>
</body>
04-15
401
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-22
520
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-09
204
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)