javascript - 如何添加带有附加到按钮的事件属性的动态CSS类

Question

如何将以下 css 类动态添加到按钮。

.custom-button:active{
    background-image: url('images/pressed.jpg') !important;
}

我使用以下代码在 java 脚本中创建了很多按钮。这些按钮已经有一个没有属性 (active) 的 .custom-button button 类。

var ItemsToAdd = '';
ItemsToAdd += '<a id="' + id + '" data-role="button" style="background-image:url('+ img_path_normal +');border-width:0px;" class="custom-button" ></a>';                
$("#container2").append(ItemsToAdd);

我已经使用 java 脚本添加的类如下:

.custom-button {
    height: 150px !important; 
    width: 120px;
    background-size:100% 100%;
    border:0px;
    border-radius:0px;
    border-style:none;
    padding:0px;
    margin:0px;
    border-width:0px;
}

Answer 1

您可以使用 addClass() 将任何类添加到 HTML 元素。

像这样设置你想要添加的 CSS:

.custom-button-active{
    background-image: url('images/pressed.jpg') !important;
}

请注意，我将其更改为 .custom-button-active，因此它不使用伪类(因为不需要它)。现在，当您希望将此样式应用于按钮时，只需将该类添加到按钮即可。

button.addClass('custom-button-active');

现在，除了您已经为其提供的任何其他类之外，该按钮还将具有该类，并将使用适当的样式。