Dodawanie klasy za pomocą javascript, a nie zastępowanie

Question

Chciałbym dodać klasę do elementu i nie zastępować klas, które już tam są.

Oto mój javascript tej pory:

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

To kawałek javascript zastępuje istniejących klas z black. Jeśli klasa ma już numer black, zostanie zmieniona na normal.

Chciałbym jakoś połączyć powyższy skrypt ze skryptem pod skryptem, który dodaje klasę, zamiast zastępować wszystkie istniejące klasy.

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

Answer 1

Oto kilka prostych funkcji javascript, których można użyć do manipulowania nazwami klas w prostym javascript. To zajmuje trochę dodatkowej pracy w tych funkcji, aby dopasować tylko nazwy całej klasie i uniknąć dodatkowych spacji przed/po classnames:

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

Jeśli chcesz przełączać pomiędzy klasami black i normal bez wpływu na inne zajęcia na określony obiekt, można to zrobić: przykład

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

pracy tutaj: http://jsfiddle.net/jfriend00/eR85c/

Jeśli chcesz dodać klasę „czarny” chyba „normalne” był już obecny, można to zrobić:

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

Answer 2

W przypadku, gdy nie zamierzamy dodawać/usuwać/zajęcia zatrzaskowych, że dużo, chciałbym rozważyć użycie coś jak poniżej kod (zamiast dodawania 2-3 funkcje jak odpowiedź jfriend00 za).

Więc tutaj jest alternatywą dla tych, które nie lubią mieć wiele funkcji, które nie będą używać tego często:

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

To w zasadzie przechowuje długość, próbuje zastąpić, sprawdza czy to usunięte (porównując stare i nowe długości), następnie wprowadza niezbędne zmiany.

Uwaga: będzie idealnie przełączać klasy, pod warunkiem, że nie powinieneś mieć dwóch klas w tym samym czasie na początku.

DEMO