क्या क्लासलिस्ट के साथ एक एकल निर्देश में कई कक्षाओं को जोड़ने / हटाने का एक तरीका है?

Question

अब तक मुझे यह करना है:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

जबकि यह इस तरह से jQuery में उल्लेखनीय है

$(elem).addClass("first second third");

मैं जानना चाहूंगा कि क्या जोड़ने या हटाने का कोई मूल तरीका है।

Answer 1

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

के बराबर

elem.classList.add("first","second","third");

Comments

और यदि आप कई वर्ग-नामों का एरियर लागू करना चाहते हैं, तो आपको कॉल करना होगा: DOMTokenList.prototype.add.apply (elem.classList, ['first', 'second', 'third']];

— एमानुएल क्लूज

लेखन के समय फ़ायरफ़ॉक्स इसका समर्थन नहीं करता है। मेरा जवाब एक पॉलीफ़िल प्रदान करता है।

— एंडी ई

मैं इसे सही उत्तर के रूप में बदल रहा हूं, क्योंकि यह एक देशी एपीआई है, भले ही समर्थन महान न हो।

— एनरिक मोरेनो टेंट

क्या आपने el.className + = "मेरी कक्षाएं यहाँ" पर विचार किया है

— माइकल टोंटचेव

वहाँ कई वर्गों को हटाने के लिए एक तरीका है

— MeVimalkumar

Answer 2

नया प्रसार ऑपरेटर सरणी के रूप में कई सीएसएस वर्गों को लागू करना और भी आसान बनाता है:

const list = ['first', 'second', 'third'];
element.classList.add(...list);

Comments

स्वीकृत उत्तर मानों की एक सीधी सूची के साथ काम करता है, लेकिन यह एक सरणियों के साथ काम करता है ... दोनों उत्कृष्ट उत्तर लगते हैं!

— एनरिक मोरेनो टेंट

क्या मैं DOMTokenListएक सरणी के बजाय उपयोग कर सकता हूं ? मुझे पता है कि एक DOMTokenList एक सरणी जैसी वस्तु है। तो यह classList.add()विधि का उपयोग करने के लिए संभव है या DOMTokenList एक वास्तविक सरणी में परिवर्तित किया जाना चाहिए?

— xela84

Answer 3

classListसंपत्ति है कि डुप्लिकेट कक्षाएं अनावश्यक तत्व में नहीं जोड़ा जाता है। आदेश में इस कार्यक्षमता रखने के लिए, यदि आप पूरे अक्षरों में लिखावट संस्करणों या jQuery संस्करण नापसंद करते हैं, मैं एक जोड़ने का सुझाव था addManyसमारोह और removeManyकरने के लिए DOMTokenList(के प्रकार classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

ये तब उपयोग करने योग्य होंगे:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

अपडेट करें

अपनी टिप्पणियों के अनुसार, यदि आप केवल उनके लिए कोई कस्टम विधि लिखना चाहते हैं, तो वे परिभाषित नहीं हैं:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

Comments

फिर भी एक अच्छा जवाब। और मैं इसे आपके लिए संपादित नहीं कर सका क्योंकि यह केवल 2 अक्षर था।

— पीट

Answer 4

चूंकि सिर्फ add()विधि classListअलग-अलग तर्कों को पारित करने की अनुमति देती है और एक भी सरणी नहीं, इसलिए आपको add()आवेदन का उपयोग करके चालान करना होगा। पहले तर्क के लिए आपको classListउसी DOM नोड से संदर्भ पास करने की आवश्यकता होगी और दूसरे तर्क के रूप में उन वर्गों की सरणी को जोड़ना होगा जिन्हें आप जोड़ना चाहते हैं:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);

Comments

यह स्प्रेड ऑपरेटर के साथ समाधान का ES5 संस्करण है (@morkro उत्तर देखें )। बैबल रेप्लस पर इसे आसानी से जांचें ।

— निकेन्सौल

Answer 5

किसी तत्व में वर्ग जोड़ने के लिए

document.querySelector(elem).className+=' first second third';

अपडेट करें:

एक वर्ग निकालें

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

Comments

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

— एनरिक मोरेनो टेंट

करो नहीं का उपयोग className। यह प्रदर्शन के लिए भयानक है (यहां तक ​​कि इसके मूल्य को पुनर्प्राप्त करने का कारण एक reflow है)।

— जेकब

Answer 6

DOMTokenList कल्पना के नए संस्करणों में राज्य को बाध्य करने के लिए कई तर्क add()और remove()साथ ही एक दूसरे तर्क की अनुमति है toggle()।

लेखन के समय, Chrome कई तर्कों का समर्थन करता है add()और remove(), लेकिन कोई भी अन्य ब्राउज़र नहीं करता है। IE 10 और निचला, फ़ायरफ़ॉक्स 23 और निचला, क्रोम 23 और निचला और अन्य ब्राउज़र दूसरे तर्क का समर्थन नहीं करते हैं toggle()।

मैंने निम्नलिखित छोटे पॉलीफ़िल को लिखा था कि जब तक समर्थन का विस्तार न हो जाए, तब तक मुझ पर टिकें:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

ES5 अनुपालन के साथ एक आधुनिक ब्राउज़र और DOMTokenListउम्मीद की जाती है, लेकिन मैं कई विशेष रूप से लक्षित वातावरण में इस पॉलीफ़िल का उपयोग कर रहा हूं, इसलिए यह मेरे लिए बहुत अच्छा काम करता है, लेकिन इसे उन लिपियों के लिए ट्विकिंग की आवश्यकता हो सकती है जो IE 8 और निम्न जैसे विरासत ब्राउज़र वातावरण में चलेंगे। ।

Comments

कोई भी उल्लेख नहीं करता है कि IE10 कई वर्गों को जोड़ने की अनुमति नहीं देता है। यह मेरे लिए अच्छी तरह से काम किया धन्यवाद! हालांकि मैं सावधानी बरतूँगा कि IE9 में मुझे एक त्रुटि मिलती है कि DOMTokenList परिभाषित नहीं है। आप उसके लिए भी हिसाब देना चाह सकते हैं। या केवल इसे चलाएं यदि (टाइपो डोमटोकनलिस्ट! == 'अपरिभाषित')

— रयान ओर

@ रयान: धन्यवाद, मुझे लगा कि DOMTokenList IE 9 में समर्थित था, लेकिन मुझे लगता है कि यह याद किया गया था। मैं कुछ बिंदु पर वर्कअराउंड की कोशिश करूँगा।

— एंडी ई

एक असफल DOMTokenList पर लगता है कि आपको शब्द सीमा regEx की जाँच के साथ ClassName का उपयोग करना होगा

— ग्रेग

Answer 7

आप नीचे की तरह कर सकते हैं

जोड़ना

elem.classList.add("first", "second", "third");

हटाना

elem.classList.remove("first", "second", "third");

संदर्भ

TLDR;

हटाने के ऊपर सीधे मामले में काम करना चाहिए। लेकिन हटाने के मामले में, आपको यह सुनिश्चित करना चाहिए कि उन्हें हटाने से पहले कक्षा मौजूद है

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

Answer 8

यहाँ IE 10 और 11 उपयोगकर्ताओं के लिए एक काम है जो बहुत सीधे आगे लग रहा था।

var elem = document.getElementById('elem');

['first','second','third'].map(item => elem.classList.add(item));

<div id="elem">Hello World!</div>

या

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.map(function(item) {
    return elem.classList.add(item);
});

<div id="elem">Hello World!</div>

Comments

अछा सुझाव। .Map () के बजाय .forEach () का उपयोग करूंगा - हालांकि यह क्लीनर / स्थितियों के लिए अधिक कुशल है जैसे कि आप लौटे हुए सरणी का उपयोग नहीं कर रहे हैं।

— टेनी

हाँ यह सच है।

— colecmc

Answer 9

मानक निश्चितता केवल एकल वर्ग को जोड़ने या हटाने के लिए अनुमति देती है। छोटे आवरण कार्यों के एक जोड़े को आप क्या पूछ सकते हैं:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

ये आवरण आपको अलग-अलग तर्कों के रूप में कक्षाओं की सूची को निर्दिष्ट करने की अनुमति देते हैं, जैसे कि अंतरिक्ष या अल्पविराम द्वारा अलग किए गए आइटम या एक संयोजन। एक उदाहरण के लिए http://jsfiddle.net/jstoolsmith/eCqy7 देखें

Answer 10

एक बहुत ही सरल, गैर-फैंसी, लेकिन काम करने वाला समाधान जो मुझे मानना ​​होगा कि यह बहुत ही क्रॉस ब्राउज़र है:

यह फ़ंक्शन बनाएं

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

इसे इस तरह से कॉल करें: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... जहाँ arrayToRemove को हटाने के लिए वर्ग नामों की एक सरणी है: ['myClass1', 'myClass2'] वगैरह

... और arrayToAdd जोड़ने के लिए वर्ग नामों की एक सरणी है: ['myClass3', 'myClass4' इत्यादि।

Answer 11

यह मान लें कि आपके पास जोड़े जाने के लिए कक्षाओं की एक सरणी है, आप ES6 स्प्रेड सिंटैक्स का उपयोग कर सकते हैं:

let classes = ['first', 'second', 'third']; elem.classList.add(...classes);

Answer 12

मुझे @ rich.kelly का जवाब पसंद आया, लेकिन मैं एक ही नामकरण का उपयोग करना चाहता था classList.add()(कॉमा सेपरेटेड स्ट्रिंग्स), इसलिए थोड़ा विचलन।

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

तो आप तब उपयोग कर सकते हैं:

document.body.classList.addMany('class-one','class-two','class-three');

मुझे सभी ब्राउज़रों का परीक्षण करने की आवश्यकता है, लेकिन यह क्रोम के लिए काम करता है।
क्या हमें अस्तित्व की तुलना में कुछ अधिक विशिष्ट के लिए जाँच करनी चाहिए DOMTokenList.prototype.addMany? वास्तव classList.add()में IE11 में विफल होने का क्या कारण है?

Answer 13

एक और पॉलीफिल यहाँ के लिए element.classListहै । मैंने इसे एमडीएन के माध्यम से पाया ।

मैं उस स्क्रिप्ट को शामिल करता हूं और इसका उपयोग element.classList.add("first","second","third")करता हूं जैसा कि यह इरादा है।