javascript ile bir sınıf ekleme, yerine

Question

değiştir

Bir öğeye bir sınıf ekleme ve hangi sınıfların zaten orada yerine geçme yeteneğini istiyorum.

İşte şimdiye kadar benim javascript: javascript parçası black ile mevcut sınıfları değiştirir Yani

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

. Eğer sınıf zaten black ise, normal olarak değiştirilmiştir.

Yukarıdaki komut dosyasını, aşağıdaki varolan tüm sınıfları değiştirmek yerine bir sınıf ekleyen komut dosyasıyla birleştirmek istiyorum.

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

Answer 1

Basit javascript'te sınıf adlarını değiştirmek için kullanabileceğiniz birkaç basit javascript işlevi vardır.

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

Eğer black ve normal sınıflar arasında geçiş istiyorsa başka herhangi sınıfları etkilemeden: önce/sınıf isimlerinin sonra sadece bütün sınıf adlarıyla eşleşen ve fazladan boşluk önlemek için bu işlevlerde biraz ekstra iş alır belirtilen nesne, bunu yapabilirdi:

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

Çalışma örneği burada: http://jsfiddle.net/jfriend00/eR85c/

Eğer "normal" zaten mevcut değilse "siyah" sınıfını eklemek istedim, bunu yapabilirdiniz Bunu yapmak: Eğer/çok geçiş sınıfları eklemek/çıkarmak için gidiş değildir durumda

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

Answer 2

, ben (yerine jfriend00 yanıt gibi 2-3 işlevleri ekleyerek) aşağıdaki kodu gibi bir şey kullanarak ele alacak. Yani burada

sık olduğunu kullanmaz birçok fonksiyona sahiptir sevmiyorum olanlar için alternatiftir:

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

Temelde uzunluğunu depolar, kaldırılmasını denetler eğer değiştirmeye çalıştığında sınıf (eski ve yeni uzunlukları karşılaştırarak) gerekli değişiklikleri uygular.

Not:, sınıfları, aynı anda iki sınıfa aynı anda sahip olmamak koşuluyla mükemmel şekilde değiştirecektir.

DEMO