JavaScript:使用内联onClick切换类？

Question

我想在这里复制css转换.

与示例类似,我创建了:

<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>

<div class="box"></div>


.box {
width: 150px;
height: 150px;
background-color: red;
border: 1px solid #000;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.grow {
 width: 350px;
}

https://jsfiddle.net/swrhho41/15/

但是,这似乎不起作用.增长类没有被添加到div中.

是否需要更多的JS？

Answer 1

box不是id.这是一堂课.

因此,你document.getElementById什么也不做.只需将其更改为

document.getElementsByClassName('box')[0].classList.toggle('grow');

这是小提琴