添加使用javascript一类，而不是取代(Adding a class with javascr

我想添加一个类的元素，并不能取代类是已经存在哪些能力。

下面是我的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");
    }
}

Answer 2:

如果你不打算添加/删除/多，我会考虑使用类似下面的代码切换类（而不是添加2-3的功能，如jfriend00的答案）。

所以在这里是不喜欢带有不经常使用的许多功能的那些替代：

function toggle(id) {
    var obj = document.getElementById(id), str, len;

    if (obj) {
        str = " " + obj.className + " ";
        len = str.length;

        str = str.replace(" normal ", " ");

        if (str.length != len) {
            str += " black";
        } else {
            str = str.replace(" black ", " ");

            if (str.length != len) {
                str += " normal";
            }
        }

        obj.className = str.replace(/^\s+|\s+$/g, "");
    }
}

它基本上存储长度，试图更换，检查是否它去掉了类（通过比较新旧的长度）然后应用必要的修改。

注意：它会完全切换类，但你不应该有两个班在开始的同时状态。

DEMO

文章来源: Adding a class with javascript, not replace