更改元素样式
1.使用element.style: 获得修改元素样式， 如果修改样式比较少或功能简单。
2.使用className:改变当前元素的类名，如果修改样式比较多或复杂。
注意className会覆盖原先的类名，如果想要保留原先类名使用多类选择器。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color:#fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
//1.使用element.style 获得修改元素样式 如果样式比较少或功能简单
var test =document.querySelector('div');
test.onclick =function() {
// this.style.backgroundColor='purple';
// this.style.color='#fff';
// this.style.fontSize='25px';
//this.style.marginTop='100px';
//改变当前元素的类名
//2.我们可以使用className修改元素样式 如果修改样式比较多 className会覆盖以前类名
//3.如果想要保留原先的类名，我们可以这么做 多类名选择器
this.className='change';
this.className='first change';
}
</script>
</body>
</html>
代码效果
onclick触发前 onclick触发后
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
