classList를 사용하여 하나의 단일 명령으로 여러 클래스를 추가 / 제거하는 방법이 있습니까?

지금 까지이 작업을 수행해야합니다.

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

이것은 jQuery에서 가능하지만 이와 같이

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

추가하거나 제거 할 수있는 기본 방법이 있는지 알고 싶습니다.

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

~는 같다

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

새로운 스프레드 연산자를 사용하면 여러 CSS 클래스를 배열로 쉽게 적용 할 수 있습니다.

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

이 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) {...}

이 add()메소드 classList는 단일 배열이 아닌 별도의 인수를 전달할 수 있으므로 apply를 add()사용하여 호출해야합니다 . 첫 번째 인수의 classList경우 동일한 DOM 노드에서 참조 를 전달하고 두 번째 인수로 추가하려는 클래스 배열을 전달해야합니다.

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

요소에 클래스를 추가하려면

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

최신 정보:

수업 제거

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

최신 버전의 DOMTokenList 스펙 은 and에 대한 여러 인수 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이지만 예상되는 여러 환경 에서이 polyfill을 사용하고 있기 때문에 나에게 적합하지만 IE 8 이하와 같은 레거시 브라우저 환경에서 실행되는 스크립트를 조정해야 할 수도 있습니다. .

당신은 아래처럼 할 수 있습니다

더하다

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

다음은 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>

표준 정의는 단일 클래스 추가 또는 삭제에만 허용됩니다. 몇 가지 작은 래퍼 함수가 원하는 것을 할 수 있습니다.

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을 참조하십시오.

내가 생각해야 할 매우 간단하고 환상적이지는 않지만 작동하는 솔루션은 매우 크로스 브라우저입니다.

이 함수 만들기

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'] etcetera

... 그리고 arrayToAdd는 추가 할 클래스 이름의 배열입니다 : [ 'myClass3', 'myClass4'] etcetera

추가 할 클래스 배열이 있다고 가정하면 ES6 스프레드 구문을 사용할 수 있습니다.

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

@ 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');

모든 브라우저를 테스트해야하지만 Chrome에서 작동했습니다.
우리가 존재하는 것보다 더 구체적인 것을 점검해야합니까 DOMTokenList.prototype.addMany? classList.add()IE11에서 정확히 실패 하는 원인은 무엇입니까 ?

에 대한 또 다른 polyfill element.classList은 여기에 있습니다 . MDN 을 통해 찾았습니다 .

해당 스크립트를 포함시키고 element.classList.add("first","second","third")의도 한대로 사용합니다.