javascript - 如何用另一次点击撤销 onclick 事件？

Question

function show()
{
var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
elem.style.width = "500px";
}
</script>

我将此代码附加到一个 onclick

<li onclick="show()">

元素原本是200px，点击后变成500px。我如何让它工作，以便当我再次单击它时它回到 200？？

Answer 1

最好的办法是使用 CSS 类来设置宽度。这样做的好处是:

• 您不必在多个地方(CSS 和 JS)指定宽度(-> 更易于维护)
• 您不必知道元素的默认宽度(-> 更灵活)

例子:

CSS:

.wide {
    width: 500px;
}

HTML:

<li onclick="show(this)">...</li>

JS:

function show(elem) {
    elem.classList.toggle('wide');
}

DEMO

看看 MDN documentation regarding classList有关浏览器支持的信息。您还可以在这个关于处理元素上的 CSS 类的优秀问题/答案中找到替代方案:Change an element's class with JavaScript

要了解有关事件处理的更多信息(绑定(bind)事件处理程序的方法、事件处理程序内部可用的信息等)，请查看 excellent articles at quirksmode.org .