javascript - 如何使用 HTMLElement.classList(.toggle)？

Question

我制作了一个网页 (woohoo) 来测试一些 CSS3 转换 (再次 woohoo) 的东西。过渡效果很好(最后哇哦)。然而，新的 HTMLElement.classList 对另一个元素做了一些奇怪的事情。

网页:http://hotblocks.nl/tests/css/transitions.html

它的作用: 在 body 元素上切换类 b。

它是如何做到的: 难以置信的简单:document.body.classList.toggle('b');

而且有效!但! body 的第一个 child 不知何故发生了变化。第一个 child 的类在切换之前是慢，然后更改为object(通过切换？？？)。

为什么要这样做？我没有正确使用切换功能吗？切换功能的工作方式是否与我预期的不同？没有仔细阅读文档/规范，但它 (.classList) 很简单，对吧？

Answer 1

问题不在 toggle 函数中，而是在页面末尾的脚本标记中，它为按钮标记初始化事件处理程序。

该脚本将事件处理程序添加到文档中的所有button 标记，以便单击按钮设置按钮父元素中第一个div 的类object 加上按钮的类名。

您可能只打算将此事件处理程序添加到前后按钮，但它也添加到 bgcolor 按钮，导致它在按钮按下时更改 slow div 的类名点击。