자바스크립트로 여러 CSS 클래스 추가하기

여러 클래스를 요소에 추가하려면 classList.add 메서드에 여러 인수를 전달하면 됩니다. 각 인수는 추가하려는 클래스를 나타냅니다. 다음은 그 방법입니다:

기본 방법

Element.classList.add('container', 'class1', 'class2', 'class3');

배열과 apply 활용

• 여러 인수와 함께 classList.add를 사용하여 여러 클래스를 직접 추가합니다.
• apply 메서드를 사용하여 배열에서 클래스를 추가합니다.
• 스프레드 연산자(...)를 사용하여 배열 요소를 개별 인수로 펼쳐 classList.add에 전달합니다.

const classes = ['container', 'class1', 'class2', 'class3'];
Element.classList.add.apply(this.el.classList, classes);
// OR SPREAD ORPERATOR (전개 연산자)
const classes = ['container', 'class1', 'class2', 'class3'];
Element.classList.add(...classes);