ক্লাসলিস্টের সাথে একক নির্দেশে বেশ কয়েকটি ক্লাস যুক্ত / সরানোর কোনও উপায় আছে কি?

Question

এখনও পর্যন্ত আমাকে এটি করতে হবে:

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

এটি jQuery এ যেমন doable হয়, যদিও

$(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, ['প্রথম', 'দ্বিতীয়', 'তৃতীয়']);

— ইমানুয়েল ক্লুজ

লেখার সময় ফায়ারফক্স এটি সমর্থন করে না। আমার উত্তরটি একটি পলিফিল সরবরাহ করে।

— অ্যান্ডি ই

সমর্থনটি দুর্দান্ত না হলেও, আমি এটির উত্তরটি সঠিক উত্তর হিসাবে স্যুইচ করছি this

— এনরিক মোরেনো তাঁবু

আপনি কি el.className + = "আমার ক্লাস এখানে" বিবেচনা করেছেন

— মাইকেল

একাধিক ক্লাস অপসারণের কি উপায় আছে

— মেভিমালকুমার

Answer 2

নতুন স্প্রেড অপারেটর একাধিক সিএসএস ক্লাসকে অ্যারে হিসাবে প্রয়োগ করা আরও সহজ করে তোলে:

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

Comments

গৃহীত উত্তরগুলি মানগুলির প্রত্যক্ষ তালিকার সাথে কাজ করে তবে এটি একটি অ্যারে নিয়ে কাজ করে ... উভয়ই দুর্দান্ত উত্তর বলে মনে হয়!

— এনরিক মোরেনো তাঁবু

আমি কি DOMTokenListঅ্যারের পরিবর্তে একটি ব্যবহার করতে পারি ? আমি জানি যে একটি ডমটোকেনলিস্ট একটি অ্যারের মতো অবজেক্ট। সুতরাং classList.add()পদ্ধতিতে এটি ব্যবহার করা সম্ভব বা ডমটোকেনলিস্টকে সত্যিকারের অ্যারেতে রূপান্তর করতে হবে?

— xela84

Answer 3

classListসম্পত্তি যে ডুপ্লিকেট শ্রেণীর অকারণে উপাদান যোগ করা হবে না নিশ্চিত। অর্ডার এই কার্যকারিতা যেতে চাইলে, আপনি longhand করতে সংস্করণ বা 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একই ডিওএম নোড থেকে রেফারেন্সটি পাস করতে হবে এবং দ্বিতীয় যুক্তি হিসাবে আপনি যোগ করতে চান এমন শ্রেণীর অ্যারে:

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

Comments

এটি স্প্রেড অপারেটরের সাথে সমাধানের ES5 সংস্করণ (@ মুরক্রো উত্তর দেখুন )। এটি সহজেই বাবেল Repl এ দেখুন ।

— নিকেন্সল

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 । এটি পারফরম্যান্সের জন্য ভয়াবহ (এমনকি এর মানটি পুনরুদ্ধার করা রিফ্লো দেয়)।

— জ্যাকব

Answer 6

DOMTokenList স্পেসের আরও নতুন সংস্করণগুলি একাধিক যুক্তি দেয় add()এবং remove()সেই সাথে দ্বিতীয় বারের মতো toggle()রাষ্ট্রকে বাধ্য করার অনুমতি দেয়।

লেখার সময়, ক্রোম একাধিক যুক্তিগুলি সমর্থন করে add()এবং এতে সমর্থন করে remove()তবে অন্যান্য ব্রাউজারগুলির কোনওটিই তা করে না। আইই 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প্রত্যাশিত, তবে আমি এই পলিফিলটি বেশ কয়েকটি নির্দিষ্টভাবে লক্ষ্যযুক্ত পরিবেশে ব্যবহার করছি, সুতরাং এটি আমার পক্ষে দুর্দান্ত কাজ করে তবে এর জন্য লিপি উত্তোলনকারী ব্রাউজার পরিবেশে যেমন আই 8 এবং নিম্নের মধ্যে চলতে পারে এমন স্ক্রিপ্টগুলির জন্য টুইট করার প্রয়োজন হতে পারে it ।

Comments

কেউই উল্লেখ করতে পারে না যে IE10 একাধিক ক্লাস যুক্ত করার অনুমতি দেয় না। এটি আমার জন্য সুন্দরভাবে কাজ করেছে তাই ধন্যবাদ! যদিও আমি সতর্কতা অবলম্বন করব যে আই 99 এ আমি একটি ত্রুটি পেয়েছি যে ডমটোকেনলিস্ট সংজ্ঞায়িত হয়নি। আপনি এটির জন্য অ্যাকাউন্ট করতেও পারেন। বা কেবল এটি চালান যদি (টাইমফাল ডোমটোকেনলিস্ট! == 'অপরিজ্ঞাত')

— রায়ান ওরে

@ রায়ান: ধন্যবাদ, আমি ভেবেছিলাম ডুমটোকেনলিস্ট আইই 9 তে সমর্থিত হয়েছিল তবে আমি অনুমান করেছি যে এটি মিস হয়েছে। আমি চেষ্টা করব এবং এক পর্যায়ে একদম তদন্ত করব।

— অ্যান্ডি ই

ব্যর্থ ডোমটোকেনলিস্টে দেখে মনে হচ্ছে আপনি শব্দ সীমানা রেজিএক্স চেক সহ ক্লাসের নামটি ব্যবহার করতে চান

— গ্রেগ

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

আইই 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]); 
    }
}

এটিকে এভাবে কল করুন: সরানএডড ক্লাসেস (নোডক্লাসলিস্ট, অ্যারেটিওরোমোভ, অ্যারেটিওএডডি);

... যেখানে অ্যারেটিওরোমোভ সরানোর জন্য শ্রেণীর নামের একটি অ্যারে: ['মাই ক্লাস 1', 'মাই ক্লাস 2'] ইত্যাদি

... এবং অ্যারেটিওএড্ড যোগ করার জন্য শ্রেণীর নামের একটি অ্যারে: ['মাই ক্লাস 3', 'মাই ক্লাস ৪'] ইত্যাদি

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()আইই ১১ এ ব্যর্থ হওয়ার কারণ কী ?

Answer 13

আরেকটি polyfill element.classListহয় এখানে । আমি এটি MDN এর মাধ্যমে খুঁজে পেয়েছি ।

আমি সেই স্ক্রিপ্টটি অন্তর্ভুক্ত করি এবং element.classList.add("first","second","third")এটি যেমন ইচ্ছা তেমন ব্যবহার করি।