使用JavaScript添加类，而不是替换类

Question

使用JavaScript添加类，而不是替换类

5

我希望能够给元素添加一个类，而不是替换已有的类。

以下是目前的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";

- davecave

也许 https://developer.mozilla.org/zh-CN/docs/DOM/element.classList 可以帮到你。它类似于 jQuery，但是只适用于非常现代的浏览器，并且使用纯 JavaScript 实现。 - Oriol

3个回答

0

如果你不会频繁地添加/删除/切换类，我建议使用以下代码（而不是像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, "");
    }
}

这个程序基本上会存储长度，尝试替换，检查它是否已经移除了类（通过比较旧的和新的长度），然后应用必要的更改。

注意: 只要你不在开头同时拥有两个类，它就会完美地切换这些类。

演示

- ajax333221

我认为这里存在一个问题，如果类名以“one normal two”开头，因为你的替换操作会将其变成“onetwo”，最终你会得到"onetwo black"。 - jfriend00

@jfriend00 你是对的，应该用空格替换。另外我需要去除空格（更新中...）。 - ajax333221

0

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

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

在这里我使用了classList.add()将类添加到锚点标签中。

- Smartupworld

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

以下是一些纯 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/

如果你想要添加“black”类，除非已经存在“normal”类，你可以这样做：

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