Есть ли способ, чтобы добавить/удалить несколько классов в одной инструкции с classList?

до сих пор я должен сделать это:



elem.classList.add("first");

elem.classList.add("second");

elem.classList.add("third");


хотя это выполнимо в jQuery, как это



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


Я хотел бы знать, есть ли какой-либо родной способ добавить или удалить.

614   12  

12 ответов:

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

равна

elem.classList.add("first","second","third");
170  
2013-01-21 05:37:08

новая распространение оператор делает его еще проще применять несколько классов CSS в качестве массива:

const list = ['first', 'second', 'third'];
element.classList.add(...list);
34  
2016-05-17 13:03:59

The classList свойство гарантирует, что повторяющиеся классы не добавляются излишне к элементу. Чтобы сохранить эту функциональность, Если вам не нравятся версии longhand или версия jQuery, я бы предложил добавить

18  
2013-09-18 18:52:02

С add() метод classList просто позволяет передавать отдельные аргументы, а не один массив, вам нужно вызвать add() С помощью apply. Для первого аргумента вам нужно будет передать classList ссылка из того же узла DOM и в качестве второго аргумента массив классов, которые вы хотите добавить:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);
12  
2016-02-26 02:52:54

новая версия DOMTokenList спецификаций разрешить несколько аргументов add() и remove(), а также второй аргумент toggle() для принудительного состояния.

на момент написания статьи Chrome поддерживает несколько аргументов для add() и remove(), но ни один из других браузеров. IE 10 и ниже, Firefox 23 и ниже, Chrome 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 и ниже.

6  
2014-04-27 00:22:13

добавить класс к элементу

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

обновление:

удалить класс

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");
4  
2012-06-20 12:11:51

стандартное определение позволяет добавлять или удалять только один класс. Несколько небольших функций обертки могут делать то, что вы просите :

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

2  
2012-06-20 12:55:28

вот работа вокруг для 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>
1  
2017-06-30 00:33:34

мне понравился @rich.ответ Келли, но я хотел использовать ту же номенклатуру, что и 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');

мне нужно проверить все браузеры, но это работает для Chrome.
Мы должны искать что-то более конкретное, чем существование DOMTokenList.prototype.addMany? Что именно вызывает classList.add() сбой в IE11?

0  
2015-05-19 18:22:01

еще один полифилл для element.classList и здесь. Я нашел его через MDN.

Я включаю этот скрипт и использовать element.classList.add("first","second","third") как и предполагалось.

0  
2016-01-16 19:25:15

предположим, что у вас есть массив классов для добавления, вы можете использовать синтаксис распространения ES6:

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

0  
2017-05-23 11:06:11

очень простое, не причудливое, но рабочее решение, которое я должен был бы поверить, очень кросс-браузер:

создать эту функцию

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 (узел.classList, arrayToRemove, arrayToAdd);

...где arrayToRemove-это массив имен классов для удаления: ['myClass1',' myClass2'] и так далее

...и arrayToAdd-это массив имен классов для добавления: ['myClass3', 'myClass4'] и так далее

0  
2018-08-12 23:24:50

Comments

    Ничего не найдено.
Click here to cancel reply.