如何动态改变css的样式

!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style type="text/css"
*{margin: 0;padding: 0;}
.bg{
margin: 0 auto;
width: 500px;
height: 300px;
line-height: 300px;
background-color: red;
text-align: center;

}
button{
display: inline-block;
width: 100px;
}