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

【问题标题】：Adding a class with javascript, not replace用javascript添加一个类，而不是替换
【发布时间】：2012-08-21 12:55:34
【问题描述】：

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

到目前为止，这是我的 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";

【问题讨论】：

也许developer.mozilla.org/en-US/docs/DOM/element.classList 可以帮助你。它类似于 jQuery，但使用纯 javascript，但仅适用于非常现代的浏览器。

标签： javascript css class

【解决方案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");
    }
}

【讨论】：

如果您无法使用 jQuery 或原型，那么拥有如此出色的资源。
切换代码似乎是我需要的，但在设置时遇到了一些麻烦。这是我现在拥有的代码：function black(body) { var obj = document.getElementById(body); if (obj) { toggleBetweenClasses(obj, 'normal', 'black'); } }
我的正文 html：<body id="body" class="normal"> 和我的链接：<a href="javascript:black('body');">link</a>
@davecave - 它在这里对我有用：jsfiddle.net/jfriend00/eR85c。你必须向我展示你的工作页面，我才能知道你有什么错误。
@davecave - 仅供参考，您不需要在 body 标签上使用 ID。您可以随时使用document.body 获取它。

【解决方案2】：

如果您不想添加/删除/切换类那么多，我会考虑使用类似下面的代码（而不是像 jfriend00 的答案那样添加 2-3 个函数）。

所以对于那些不喜欢有很多不会经常使用的功能的人来说，这里是替代方案：

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

【讨论】：

如果类名以 "one normal two" 开头，我认为这会出现问题，因为您的替换将其变为 "onetwo"，而您最终以 'onetwo black" 结尾。
@jfriend00 你说得对，应该换成空格。我还需要修剪空格（正在更新...）

【解决方案3】：

我不知道这是否是你想要的，因为这里的答案对我来说似乎很复杂......无论如何我需要添加类名而不替换旧的，所以我就是这样做的......

menu.children[i].getElementsByTagName('a')[0].**classList.add('resetAfter')**;

这里我使用classList.add() 将类附加到锚标记中。

【讨论】：