使用javascript添加类,而不是替换

我希望能够为一个元素添加一个类,而不是替换已经存在的类.

这是我到目前为止的javascript：

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

这段javascript用黑色替换现有的类.如果该类已经是黑色,那么它将变为正常.

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

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

最佳答案

这里有几个简单的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);
    }
}

如果要在不影响指定对象上的任何其他类的情况下在黑色和普通类之间切换,可以执行以下操作：

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");
    }
}

使用javascript添加类,而不是替换

猜你在找的CSS相关文章