使用 JavaScript 使 HTML 按钮显示为已按下？

Question

如何使 HTML 按钮看起来像是通过 JavaScript 按下的？

我有一个按钮，按下时发送一条网络消息，松开时发送另一条网络消息。

这个特定命名的按钮可能会在一个页面或多个设备上显示多次。因此，如果按下了任何相同用途的按钮，我需要让其余的副本看起来像是按下了。

我怎样才能实现这种行为？

Answer 1

我个人认为为此使用 JavaScript 会有点矫枉过正，这是使用 CSS 完成的。您的代码将介于 { } 之间。

button:active {
    color: red;
    background-color: pink;
    padding: 8px;
}

警告！

这将为所有 button 元素设置样式，而不仅仅是一个。如果您只想要一个，则使用 ID，如果不止一个，则使用 class.

http://jsfiddle.net/cp4bob0z/

编辑 1

仅限 JS

<button id="test" onclick="styleButton(this);">Hello!</button>

function styleButton(element) {
     document.getElementById(element.id).className = "yourClassName";
}

Answer 2

您可能希望将 class 添加到函数中的按钮。

$('button').addClass('someclass')

然后只需使用 CSS 定义您的 class。

Answer 3

在您的 CSS 中，像这样设置活动按钮的样式：

button:ative, .active-class {

}

这样一来，点击的按钮看起来就和 class active-class 一样了。

在这里，您可以按照自己喜欢的任何方式应用/删除 class...

$(".my-button").on("click", function(){
  $(this).toggleClass("active-class");
});

Example JSFiddle

Answer 4

borderStyle 样式属性可以设置为执行此操作。要显示按下的按钮，请使用

document.getElementById("myButton").style.borderStyle = "inset";

完成后，使用

document.getElementById("myButton").style.borderStyle = "outset";

将按钮设置回正常状态。

使用 JavaScript 使 HTML 按钮显示为已按下？

Make HTML button appear pressed with JavaScript?

html

javascript

jquery

simulate