Javascript 为什么'；我的JS不能添加一个HTML类吗？

我已经搞乱这个代码有一段时间了，但我似乎无法让它工作。我制作了一个

div

，它是一个绿色的框，我希望它在被点击时进行CSS转换（通过使用JS添加一个类），但这不是它现在正在做的。我在这个问题上犯了什么新手错误

---

这是我的代码：还有一个JSFIDLE

function box（）{document.getElementById（'box'）[0].setAttribute（“class”，“box_ready”）；
}

正文{
保证金：0；
填充：0；
}
.集装箱{
宽度：800px；
保证金：0自动；
}
#盒子{
宽度：200px；
高度：200px；
背景色：#393；
}
#框：悬停{
光标：指针；
}
.盒子准备好了吗{
-webkit动画：幻灯片2；
动画：幻灯片2；
动画填充模式：正向；
}
@关键帧滑动{
到{
-webkit转换：转换（600px，0px）；
-ms转换：转换（600px，0px）；
转换：转换（600px，0px）；
变换：旋转（90度）；
}
}
/*完成后添加WebKit*/

---

您的代码应更改为

document.getElementById（'box'）.setAttribute（“class”，“box_ready”）

getElementById
只返回一个匹配的元素，而不是数组，因为单个文档的ID不能重复一次以上，根据。
我可以通过从函数中删除
[0]
使其工作：

function box(){
    document.getElementById('box').setAttribute("class", "box_ready"); 
}

请记住，
getElementById（）
返回一个元素，但
getElementsByClassName（）
返回一个元素数组

此外，尽管这可能很明显，但您只能在元素将其作为ID时使用
getElementById（）
。与
getElementByClassName（）相同
它不是
getElementsById
它应该是
getElementById
设置
class
HTML属性时，您正在删除现有类。这将删除现有的
框
类样式，使框消失。您还将使用第二个
transform
CSS属性覆盖
translate
transform

固定JSFIDLE：

编辑：注意，为了清晰起见，我更改了翻译并删除了前缀属性。
检查控制台，您有错误。仅供参考，
getElementById（）
不会返回上述代码段中的数组，您使用的是
getElementById
，但在Fiddle中，它是
getElementsByClassName
。。。。使用
getElementsByClassName
，您需要在元素返回
NodeList
时提及元素的
索引。。只在head元素中添加javascript。请在这里查看jsfiddle:@SunnyS.M感谢您的努力和jsfiddle！我已经弄明白了！但我会用你小提琴里的一些东西！非常感谢。该死的，你抢先了我一步。似乎对我不起作用，请看这个提琴：不熟悉JS提琴，但我在加载函数时遇到了麻烦。试试这个：我看到了你的编辑。谢谢你在这个项目上花费的时间和精力！我很感激你的贡献！非常感谢你！没问题，伙计：）这是对@rayon评论的回复吗？谢谢你的努力和帮助解决这些问题！我并不真的关心我的横向转换，但无论如何还是要感谢你指出这一点！