修改元素类型:设置className
如果要修改元素比较多的样式,可以不用每个样式都用- - -元素对象.style.属性名 = 属性值
可以用修改类名,css定义一个类名,将要样式写在里面,触发事件后,js将元素类名修改成新类名
注意:类名会覆盖原来的类名,如果要保留原来的类名,可以设置类名:‘旧类名 新类名’,eg:this.className = ‘old change’;
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改类名</title>
<style>
img {
width: 200px;
border: 5px solid yellowgreen;
}
.change {
width: 360px;
border: 10px dotted pink;
margin: 200px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<img src="images/皮卡丘.jpg" alt="">
<script>
var pic = document.querySelector('img');
pic.onclick = function() {
/* this.style.width = '360px';
this.style.border = '10px dotted pink';
this.style.margin = '200px';
this.style.transform = 'rotate(30deg)'; */
this.className = 'change';
}
</script>
</body>
</html>
页面效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXhvjqHS-1632626243255)(https://statics.sdk.cn/articles/img/202107/1001027_85261f0560f960cc4576580310.gif)]