Javascript 如何为每个类指定不同的css翻译值？ 。按钮>*{ 转换：转换700ms； } .buttons>.one.closed{ 变换：translateY（-10vh）； } .buttons>.two.closed{ 变换：translateY（-20vh）； } .buttons>.three.closed{ 转换：translateY（-30vh）； }

我有这段代码，点击我添加。关闭类的三个元素，有没有一种方法来实现相同的效果，而不写css规则n次？我可以通过js来做

例如，这个例子不起作用：

const menuElements=document.queryselectoral（“.buttons>：not（.main）”；
menuElements.forEach（（el，键）=>{
el.setAttribute（“转换”、-10*键+vh”）；
el.classList.toggle（“关闭”）；
});

---

jsIDLE:

您忘记将translateY插入setAttribute。无论如何，我认为这应该有效：

函数fn（）{
const menuElements=document.queryselectoral（“.buttons>div:not（.main）”；
menuElements.forEach（（el，键）=>{
el.style.transform=`translateY（${-20*key}vh）`；
el.classList.toggle（“关闭”）；
});
}

。按钮{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
调整项目：灵活启动；
高度：69vh；
}
.按钮>*{
转换：转换700ms；
}

---

您忘记将translateY插入setAttribute。无论如何，我认为这应该有效：

函数fn（）{
const menuElements=document.queryselectoral（“.buttons>div:not（.main）”；
menuElements.forEach（（el，键）=>{
el.style.transform=`translateY（${-20*key}vh）`；
el.classList.toggle（“关闭”）；
});
}

。按钮{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
调整项目：灵活启动；
高度：69vh；
}
.按钮>*{
转换：转换700ms；
}

谢谢，它不起作用，我贴了一把小提琴，上面显示了你的代码。当我定义了css规则时，你可以看到它是有效的，当我对它进行注释并尝试手动设置它时，就像你使用javascript的示例一样，什么都没有发生。我看到了我的错误：）谢谢，它不起作用，我贴了一张小提琴，上面显示了你的代码。当我定义了css规则时，你可以看到它是有效的，当我注释它并尝试手动设置它时，就像你使用javascript的例子一样，什么都没有发生。我看到了我的错误：）谢谢