如何添加具有激活属性的动态CSS类附加到按钮

Question

How to add following css class dynamically to a button.

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

i created a lot of buttons in java-script using the following code. The buttons already have a class .custom-button button without the property (active).

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);

the class that i already added using java script is following:

.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

You can use addClass() to add any class to an HTML element.

Set up the CSS you want to add like so:

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

Notice I changed it to .custom-button-active, so it doesn't use a pseudo class (since there is no need for it). Now, when you want this style to apply to a button simply add that class to the button.

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

Now, the button will have that class in addition to any other classes you already gave it, and will use the appropriate styles.

Answer 2

As it was stated above, you can't directly work with pseudo-classes in JavaScript. However, you can just change your stylesheet from inside Javascript code. Something like this:

document.styleSheets[0].insertRule('.custom-button:active { background-image: url('images/pressed.jpg') !important; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

or

var element = document.createElement('style');
document.head.appendChild(element);
var s = element.sheet;
s.insertRule('.custom-button:active {background-image: url("images/pressed.jpg") !important;}', s.cssRules.length);

More information about that syntax here: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule