WebApi 修改元素样式-className和classList

WebApi 修改元素样式-className和classList

修改元素

let box =document.querySelector('div');
box.style.width='300px';
box.style.height='300px';

通过className修改

<style>
	.active{
    
    
        box.style.width='300px';
        box.style.height='300px';
	}
</style>

<script>
let box =document.querySelector('div');
box.className='active';
</script>

如果更改样式的div原先就有样式可以采取以下方法

<style>
    .one{
    
    
      color:blue;
	}
	.active{
    
    
        width='300px';
        height='300px';
	}
</style>

<script>
let box =document.querySelector('div');
box.className='one active';
</script>

通过classList修改
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')