HTML 有没有办法让HTML按钮保持按下状态

在本文中，我们将介绍如何使用HTML和CSS来实现按钮保持按下状态的效果。

阅读更多：HTML 教程

使用CSS的:active伪类

在HTML中，通常点击一个按钮后，按钮会出现“按下”的效果，但是一旦松开鼠标，按钮的状态会返回正常。如果我们想要按钮保持按下状态，可以使用CSS的:active伪类。

<!DOCTYPE html>
<html>
<head>
<style>
button:active {
  background-color: red;
}
</style>
</head>
<body>
<button>按下我</button>
</body>
</html>

在上面的示例中，当按钮被按下时，它的背景颜色会变成红色。当鼠标松开时，按钮的状态会恢复正常。但是我们仍然没有实现按钮保持按下状态的目标。

使用JavaScript来实现按钮保持按下状态

为了实现按钮保持按下状态的效果，我们需要使用JavaScript来控制按钮的样式。

<!DOCTYPE html>
<html>
<body>

<button id="myButton" onclick="changeButtonState()">按下我</button>

<script>
function changeButtonState() {
    var button = document.getElementById("myButton");
    button.classList.toggle("active");
}
</script>

<style>
button.active {
    background-color: red;
}
</style>

</body>
</html>

在上面的示例中，我们给按钮添加了一个id属性值为”myButton”。通过点击按钮时调用changeButtonState函数，我们使用JavaScript中的classList.toggle方法来切换按钮的类名。当按钮被点击后，会添加一个名为”active”的类，按钮的背景颜色会变成红色。再次点击按钮，会移除该类，按钮的状态会恢复正常。

通过上述代码，我们成功实现了按钮保持按下状态的效果。