如何动态改变css样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{margin: 0 auto;width: 500px;height: 300px;line-height:300px;/*background-color: red;*/text-align: center;}.red{/*margin: 0 auto;width: 500px;height: 300px;*/background-color: red;/*text-align: center;line-height:300px;*/}.blue{background-color: blue;}button{/*display: inline-block;*/width: 100;}</style></head><body><div class="red"><button onclick="hello()">改变背景颜色</button><!-- <a href="javascript:alert('hello')">改变背景颜色</a>--></div></body><script type="text/javascript">let divs=document.getElementsByTagName('div')function hello(){//找到须要改变背景颜色的容器if(divs[0].className=='red'){divs[0].className='blue'}else{divs[0].className='red'}}</script>
</html>