javascript - 在javascript中一个接一个地调用同一个onclick事件的两个不同函数

我有一个 div content，当我点击另一个 div 名称 button 时，它的高度应该是 300px。但是，当我再次点击 button div 时，如何重置高度？

这是供引用的javascript代码:

function chk()
{
    var x = document.getElementById('content').style.height = '300px';

}

这是HTML代码

<div id="content">
This is dummy text.
    </div>
    <div id="button" onclick="chk()">
    click to read
    </div>

当 button div 被点击时内容高度增加，但是我如何通过点击相同的 div 和相同的 onclick 事件来降低高度？

最佳答案

使用 CSS:

#content {
    height: auto;
}
#content.expand {
    height: 300px;
}

在你的脚本中:

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

这使状态保持在您正在处理的元素的本地，从而使代码更加灵活。

关于javascript - 在javascript中一个接一个地调用同一个onclick事件的两个不同函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20339986/