Question

我现在一直在搞乱这段代码，我似乎无法让它工作。我创建了一个绿色框div，我希望它在点击时（通过使用JS添加一个类）进行我的CSS转换，但这不是它现在正在做的事情。我用这个做了什么菜鸟错误？

这是我的代码：还有一个JSFiddle here！

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

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 800px;
    margin: 0 auto;
}

#box {
    width: 200px;
    height: 200px;
    background-color: #393;
}

#box:hover {
  cursor: pointer;
}

.box_ready {
    -webkit-animation: slide 2s;
            animation: slide 2s;
            animation-fill-mode: forwards;
}

@keyframes slide {
  to {
    -webkit-transform: translate(600px, 0px);
        -ms-transform: translate(600px, 0px);
            transform: translate(600px, 0px);
            transform: rotateY(90deg);
	}
  
}

/* Add WebKit when done*/

<div class="container">
<div id="box" onclick="box()"></div>
</div>

Answer 1

我可以通过从您的函数中移除[0]来使其工作：

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

请记住，getElementById()会返回一个元素，但getElementsByClassName()会返回一个元素数组。

此外，虽然这可能很明显，但只有当元素具有ID时才能使用getElementById()。与getElementByClassName()同上。

Answer 2

在设置box HTML属性时，您将删除现有的类。这将删除现有的translate类样式，使框消失。您还使用第二个transform CSS属性覆盖extras\intel\Hardware_Accelerated_Execution_Manager\转换。

修正了JSfiddle：https://jsfiddle.net/zn2nhbnt/20/

编辑：注意，为了清晰起见，我更改了翻译并删除了前缀属性。

Answer 3

您的代码应更改为

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

getElementById只返回一个匹配元素，而不是数组，因为根据HTML standards，单个文档的重复ID不能超过一次。

Answer 4

不是getElementsById它应该是getElementById

为什么我的JS没有添加HTML类？

4 个答案: