Question

我正在尝试复制css转换here。

与示例类似，我创建了：

<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');

这是fiddle

Answer 2

问题是您的onclick代码正在寻找一个ID：getElementById

然而你的div有一个不是id的类，把它改成

<div id="box"></div>

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

如果您将其更新为id：

，请务必同时更新您的CSS

#box {
width: 150px;
/* etc */

此外，如果您希望它增长，请在.grow !important上设置宽度。

小提琴：https://jsfiddle.net/swrhho41/18/

Answer 3

由于HAVING COUNT(DISTINCT ItemId) = 2是一个className，您需要将元素的ID设置为＆＃34; box＆＃34;：

'box'

或者将您的选择器更新为：

<div id="box"></div>

Answer 4

<div id="box" class="box">

</div>

您正在按ID检索项目，因此ID应为框

JavaScript：使用内联onClick切换类？

4 个答案: