使用Javascript更改CSS规则

这是我的css：

#firstWheel {
    position: relative;
    margin-top: 15%;
    margin-left: -52%;
    display: none;
}

我想在按下按钮后用JS传递这些其他的

#firstWheel{
  display: block;
  animation-name: pos;
  animation-duration: 1.5s;
}

@keyframes pos {
  0% {
    transform: scale(0);
}
  100% {
    transform: scale(1);
  }
}

---

这是传递大量属性的最佳方式。是否可以在一个

DOM

操作中传递所有信息？

也许在js函数中，您可以像@Pointy刚才所说的那样，使用类而不是id来处理CSS规则（如果可以的话）

function changeClass(){
   var div = document.getElementById('id of the element');
   div.classList.add('class name','class name 2',...);
}

---

希望有帮助！如果我的答案有任何错误，也请帮助留下评论。

您可以使用toggleClass函数，如示例所示：

使用类并用JS切换它们将是一种更好的方法，但是用JS实现这一点是可能的

const firstWheelStyle=document.createElement（“样式”）；
firstWheelStyle.innerHTML=`#firstWheel{
位置：相对位置；
利润率最高：15%；
左边缘：-52%；
显示：无；
}`;
document.head.appendChild（firstWheelStyle）；
const changeCssBtn=document.getElementById（“changeCss”）；
changesbsbtn.onclick=（）=>{
firstWheelStyle.innerHTML=`#firstWheel{
显示：块；
动画名称：pos；
动画持续时间：1.5s；
}
@关键帧位置{
0% {
变换：比例（0）；
}
100% {
变换：比例（1）；
}
}`;
changeCssBtn.onclick=null；//只需清除click事件，因为它只需运行一次。
};
#第一轮{
宽度：100px；
高度：100px；
背景颜色：黄色；
}

更改css
要实现这一点，可以在单击按钮时向元素添加新类。但是您需要用
覆盖当前的css规则！重要信息


$（“#我的按钮”）。在（“单击”，函数（）{
$（“#第一轮”）.addClass（“动画”）；
})
#第一轮{
位置：相对位置；
宽度：50px；
高度：50px；
背景色：红色；
显示：无；
}
.动画{
显示：块！重要；
动画名称：pos；
动画持续时间：1.5s；
}
@关键帧位置{
0% {
变换：比例（0）；
}
100% {
变换：比例（1）；
}
}



单击我
使用类而不是CSS规则的id值，然后根据需要更改类。