요소에 JavaScript의 특정 클래스가 포함되어 있는지 확인하는 방법은 무엇입니까?

JavaScript에서 요소에 클래스가 포함되어 있는지 확인하는 방법

JavaScript에서 요소로 작업할 때 요소가 클래스를 포함하는지 확인하는 것이 유용한 경우가 많습니다. 특정 클래스가 포함되어 있습니다.

문제:

요소의 className 속성을 정확한 클래스 이름과 비교하는 기존 방법을 사용하면 요소에 여러 클래스가 포함된 경우 거짓양성이 발생합니다. 예를 들어 요소에 class1 클래스가 있고 코드에서 class1을 검사하는 경우 요소에 다른 클래스도 있으면 false를 반환합니다.

해결책: element.classList.contains()

최신 솔루션은 요소에 지정된 항목이 포함된 경우 true를 반환하는 element.classList.contains() 메서드를 사용하는 것입니다. class.

element.classList.contains(className);

이 방법은 모든 주요 브라우저에서 작동하며 이전 브라우저에서 폴리필을 사용할 수 있습니다.

대안: 수정이 포함된 indexOf()

이전 브라우저와의 호환성을 위해 indexOf() 메서드를 사용할 수 있지만 false를 방지하려면 약간의 수정이 필요합니다. 긍정:

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

예제에 적용

classList.contains() 메서드를 사용하면 제공된 코드를 다음과 같이 단순화할 수 있습니다.

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

test.innerHTML = "";

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

이 접근 방식은 중복을 제거하고 클래스 존재 여부를 더욱 강력하게 검사합니다.

위 내용은 요소에 JavaScript의 특정 클래스가 포함되어 있는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!