javascript - 用javascript添加一个类，而不是替换

Question

我希望能够向元素添加一个类，而不是替换已经存在的类。

到目前为止，这是我的 javascript:

function black(body) {
var item = document.getElementById(body);
    if (item) {
        item.className=(item.className=='normal')?'black':'normal';
    }
}

那段 javascript 用 black 替换了现有的类。如果该类已经是 black，那么它将更改为 normal。

我想以某种方式将上面的脚本与下面的脚本结合起来，这会添加一个类，而不是替换所有现有的类。

var item = document.getElementById("body");
item.className = item.className + " additionalclass";

Answer 1

这里有几个纯 javascript 函数，您可以使用它们在纯 javascript 中操作类名。在这些函数中需要做一些额外的工作才能仅匹配整个类名并避免类名前后的任何额外空格:

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

function addClass(elem, cls) {
    elem.className += (" " + cls);
}

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

function toggleClass(elem, cls) {
    if (hasClass(elem, cls)) {
        removeClass(elem, cls);
    } else {
        addClass(elem, cls);
    }
}

function toggleBetweenClasses(elem, cls1, cls2) {
    if (hasClass(elem, cls1)) {
        removeClass(elem, cls1);
        addClass(elem, cls2);
    } else if (hasClass(elem, cls2)) {
        removeClass(elem, cls2);
        addClass(elem, cls1);
    }
}

如果您想在 black 和 normal 类之间切换而不影响指定对象上的任何其他类，您可以这样做:

function black(id) {
    var obj = document.getElementById(id);
    if (obj) {
        toggleBetweenClasses(obj, "black", "normal");
    }
}

这里的工作示例:http://jsfiddle.net/jfriend00/eR85c/

如果你想添加“黑色”类，除非“正常”已经存在，你可以这样做:

function black(id) {
    var obj = document.getElementById(id);
    if (obj && !hasClass(obj, "normal")) {
        addClass(obj, "black");
    }
}