修改样式属性有两种方式
第一种： 行内样式操作，**element.style **，当需要更改的样式较少时或功能简单时建议使用
第二种：类名样式操作**， element.className **，当需要修改的样式复杂并且较多时，使用该方式
element.style
行内样式操作，当需要更改的样式较少时或功能简单时建议使用，直接在 script 标签中添加，一次只能更改一个属性样式，当需要更改的样式较多时，此方法较为繁琐。
<style>
div{
width: 200px;
height: 300px;
background-color: rgb(253, 180, 180);
}
</style>
</head>
<body>
<div></div>
<script>
var div1=document.querySelector('div');
div1.onclick=function(){
this.style.backgroundColor='#333' //element.style 方式更改样式
}
</script>
</body>
element.className
当需要改变的属性样式较多时，使用此方法较为简便，把想要改变后展现的样式直接以类选择器的方式添加在 css 的 style 标签中，然后在 script 的事件中 element.className 即可，应注意在样式发生改变后，如果标签原本没有类名，则会执行完事件后添加进一个类名（刚才css中添加的），如果之前有类名，则会覆盖掉
<style>
div{
width: 200px;
height: 300px;
background-color: rgb(253, 180, 180);
}
.change{
width: 200px;
height: 300px;
background-color: rgb(39, 89, 255);
}
</style>
</head>
<body>
<div></div>
<script>
var div1=document.querySelector('div');
div1.onclick=function(){
this.className='change'; //此处的类名前不加点
}
</script>
</body>
点击前：
点击后：
点击后div标签中多了一个类名，并且类名为添加的改变后的类选择器样式
如果不想覆盖掉之前的样式又想改变添加新的样式，使用 多类名选择器
element.className=‘first，change’
本文转载自: https://blog.csdn.net/weixin_52212950/article/details/122909808
版权归原作者 卡卡西最近怎么样 所有， 如有侵权，请联系我们删除。
版权归原作者 卡卡西最近怎么样 所有， 如有侵权，请联系我们删除。