जावास्क्रिप्ट के साथ एक वर्ग जोड़ना,

Question

को प्रतिस्थापित नहीं करना है, मुझे एक तत्व में कक्षा जोड़ने की क्षमता चाहिए और यह नहीं बदले कि कक्षाएं पहले से मौजूद हैं।

यहाँ मेरी जावास्क्रिप्ट अब तक है:

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

जावास्क्रिप्ट का टुकड़ा black के साथ मौजूदा वर्गों की जगह है। यदि कक्षा पहले से ही black है तो यह normal में बदल दी गई है।

मैं किसी भी तरह से स्क्रिप्ट के नीचे लिपि के साथ स्क्रिप्ट को गठबंधन करना चाहता हूं, जो सभी मौजूदा वर्गों को बदलने के बजाय कक्षा जोड़ता है।

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

Answer 1

यहाँ कई सादे जावास्क्रिप्ट कार्यों आप सादे जावास्क्रिप्ट में वर्ग के नाम जोड़ तोड़ के लिए उपयोग कर सकते हैं। पर किसी भी अन्य वर्गों को प्रभावित किए बिना

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 वर्गों के बीच टॉगल करने के लिए करना चाहता था, तो: यह इन कार्यों में एक छोटे से अतिरिक्त काम लेता है केवल पूरी कक्षा नाम से मेल और कोई अतिरिक्त स्थान से बचने के लिए पहले/classnames के बाद यहाँ

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

Answer 2

मामले में आप टॉगल वर्गों इतना जोड़ने/हटाने/नहीं जा रहे हैं, मैं (बजाय 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, ""); 
    } 
} 

यह मूल रूप से लंबाई संग्रहीत करता है, को बदलने के लिए इसकी जांच करता है तो उसे निकाल दिया की कोशिश करता है वर्ग (पुरानी और नई लंबाई की तुलना करके) आवश्यक परिवर्तनों को लागू करता है।

नोट: यह कक्षाओं को पूरी तरह से इस स्थिति के साथ टॉगल करेगा कि आपके पास शुरुआत में एक ही समय में दो कक्षाएं नहीं होनी चाहिए।

DEMO