如何用javascript更改按钮的类？

Question

我有这样的代码：

var image = button.getElementsByTagName("span")[0];
if (isEnabled) {
    image.style.color = "#BBB"
else {
    image.style.color = "#AAA"

有人能给我一些建议吗?与其直接设置一个颜色，我可以将按钮设置为第三级启用，然后再设置为第三级禁用？

请注意，我的按钮当前有这样的类：

class="fa fa-bold"
class="fa fa-arrow"

等。

所以我需要前两个类保持不变。那么我需要能够像这样：

class="fa fa-bold enabled"
class="fa fa-bold disabled"
class="fa fa-bold enabled"

等。

Answer 1

使用classList

若要向图像中添加新的类myClass，请使用add()

将类添加到元素的类列表中。如果类已经存在于元素的类列表中，它将不再添加该类。

image.classList.add('myClass')

若要删除类，请使用remove()

以安全的方式从元素的类列表中移除类。如果类不存在，则不会引发错误。

image.classList.remove('myClass')

要使用toggle类，请使用toggle()

如果名称存在于元素的classList中，它将被删除。如果名称不存在，则将添加名称。

image.classList.toggle('myClass') // If exists, remove, if not add

若要检查元素是否具有类，请使用contains()

检查元素的类列表是否包含特定的类。

if (image.classList.contains('myClass')) {
    alert('HasClass myClass');
} else {
    alert('Dont have class');
}

CSS

.myClass {
    color: #bbb;
}

Answer 2

如果您没有使用像jQuery这样的库，该库内置了className功能，并且希望得到旧浏览器的浏览器支持，那么您可以使用自己的小函数从DOM对象中添加或删除类名，而不会干扰其他类名：

function addClass(elem, cls) {
    if (!hasClass(elem, cls)) {
        var oldCls = elem.className;
        if (oldCls) {
            oldCls += " ";
        }
        elem.className = oldCls + cls;
    }
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) !== -1) ;
}

removeClass(image, "enabled");
addClass(image, "disabled");