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

要了解有关事件处理的更多信息（绑定事件处理程序的方法，事件处理程序中可用的信息等），请查看excellent articles at quirksmode.org。

Answer 2

function show() {
    var elem = document.getElementById("pop").querySelector('li:nth-child(3)'),
        width = parseInt(elem.style.width, 10);
    if (width === 500) {
        elem.style.width = "200px";
    }
    else {
        elem.style.width = "500px";
    }
}

虽然，我可能会将函数命名为toggle或类似的东西而不是内联点击处理程序。

Answer 3

使用控制变量

var clickControl = false;
function show()
{
    if(clickControl)
    {
        var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
        elem.style.width = "500px";
        clickControl = !clickControl;
    }
    else
    {
        var elem = document.getElementById("pop").querySelector('li:nth-child(3)');
        elem.style.width = "200px";
        clickControl = !clickControl;
    }
}

如何通过另一次点击撤消onclick事件？

3 个答案: