Javascript – HTML 요소의 클래스 교체

최근에 div의 색상을 빨간색에서 녹색으로 프로그래밍 방식으로 변경해야 하는 문제를 발견했습니다. 간단해 보이지만 JavaScript를 알고 있다면 실제로는 매우 간단합니다.

jQuery에는 요소 안팎으로 클래스 속성을 교환하는 "toggleClass()"라는 함수가 포함되어 있습니다. ES6에서 비슷한 기능을 찾았지만 찾지 못했습니다. Florian Brinkmann(@FloBrinkmann)은 내가 찾고 있는 것과 정확히 일치하는 "classList.toggle()"을 가리켰습니다("예제"구절에 숨겨져 있음).

내 문제에 대한 순진한 해결책은 다음과 같습니다.

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
     .classList
     .toggle(className2);
 }

const myDiv = document.getElementById('myDiv'); 
toggleClass(myDiv, 'red', 'green');

jQuery 구현에는 요소에서 추가하거나 제거할 두 개 이상의 클래스를 정의하는 기능이 포함되어 있습니다. 새로운 ES6 요소(확산 연산자)를 사용하여 다음과 같이 구현할 수 있습니다.

function toggleClass(element, ...classNames) {
{classNames.forEach((className) => {
  element
    .classList
    .toggle(className);
  })
}
toggleClass(myDiv, 'red', green', 'yellow');

jQuery의 "toggleClass()"에는 더 많은 기능을 사용할 수 있지만 현재는 필요하지 않습니다. 처음에는 이것으로 충분합니다.