Agregar una clase con javascript, no reemplazar

Question

Me gustaría la posibilidad de agregar una clase a un elemento y no reemplazar las clases que ya están allí.

Aquí es mi javascript hasta ahora:

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

Ese pedazo de Javascript sustituye a las clases existentes con black. Si la clase ya es black, se cambia a normal.

Me gustaría combinar de alguna manera el script anterior con el script debajo del script, que agrega una clase, en lugar de reemplazar todas las clases existentes.

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

Answer 1

Aquí hay varias funciones simples de javascript que puede utilizar para manipular nombres de clases en javascript simple. Se necesita un poco de trabajo extra en estas funciones para que coincida con los nombres de toda la clase única y evitar espacios adicionales antes/después de 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); 
    } 
} 

Si quisiera cambiar entre las clases black y normal sin afectar a ninguna otra clase en la objeto especificado, se puede hacer esto: ejemplo

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

Trabajar aquí: http://jsfiddle.net/jfriend00/eR85c/

Si quiere añadir la clase "negro" a menos "normal" ya estaba presente, usted podría hacer esto:

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

Answer 2

En caso de que no se va a añadir/eliminar/clases de palanca que mucho, me gustaría considerar el uso de algo así como el código de abajo (en lugar de añadir 2-3 funciones como la respuesta de jfriend00).

Así que aquí es la alternativa para los que no les gusta tener muchas funciones que no va a utilizar que con frecuencia:

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

Básicamente almacena la longitud, trata de sustituir, comprueba si se retira el clase (comparando longitudes antiguas y nuevas) luego aplica los cambios necesarios.

Nota: Alternará las clases perfectamente con la condición de que no deba tener las dos clases al mismo tiempo al principio.

DEMO