[Javascript] html 클래스가 포함되어 있는지 확인하는 방법

질문 : 요소에 JavaScript의 클래스가 포함되어 있는지 확인하십시오.

---

jQuery가 아닌 일반 JavaScript를 사용하여 요소에 클래스 가 포함되어 있는지 확인할 수있는 방법이 있습니까?

현재 나는 이것을하고있다 :

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

문제는 HTML을 이것으로 변경하면 ...

<div id="test" class="class1 class5"></div>

... 더 이상 정확히 일치하는 항목이 없으므로 기본 출력값이 없습니다 ( "" ). 그러나 <div> 여전히 .class1 클래스 가 포함되어 있기 때문에 I have class1 이 .class1

답변

---

element.classList .contains 메소드를 사용하십시오.

element.classList.contains(class);

이것은 모든 현재 브라우저에서 작동하며 이전 브라우저도 지원하는 polyfill이 있습니다.

---

또는 이전 브라우저로 작업하고 폴리 필을 사용하여 수정하지 않으려면 indexOf 사용하는 것이 맞지만 약간 조정해야합니다.

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

그렇지 않으면 찾고있는 클래스가 다른 클래스 이름의 일부인 경우 true

데모

jQuery는 유사한 (동일하지 않은 경우) 방법을 사용합니다.

---

예제에 적용 :

이것은 switch 문과 함께 작동하지 않으므로 다음 코드로 동일한 효과를 얻을 수 있습니다.

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

또한 덜 중복됩니다.)

출처 : https://stackoverflow.com/questions/5898656/check-if-an-element-contains-a-class-in-javascript