JavaScript에서 특정 클래스의 존재를 확실하게 확인하려면 어떻게 해야 합니까?

JavaScript에서 요소 클래스 존재 확인

요소의 클래스 속성을 검사할 때 특정 클래스가 포함되어 있는지 확인해야 하는 경우가 많습니다. 제공된 코드는 switch 문을 활용하여 요소의 정확한 클래스 값을 검사하지만 이 접근 방식은 부분 일치를 감지하지 못합니다.

이 제한 사항을 해결하려면 element.classList .contains 메서드 사용을 고려하세요. 이 메소드는 클래스 이름을 매개변수로 받아들이고 요소의 클래스 목록 내에 클래스의 존재를 나타내는 부울 값을 반환합니다.

element.classList.contains(class);

이 메소드는 최신 브라우저 전체에서 보편적으로 지원되며 클래스 포함을 확인하는 일관된 방법을 제공합니다.

또는 .contains 메소드가 없는 이전 브라우저와의 호환성을 위해 다음과 같은 수정된 indexOf 버전을 사용할 수 있습니다. 방법:

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

이 수정을 통해 부분 일치를 정확하게 감지하여 찾고 있는 클래스가 더 큰 클래스 이름의 일부일 때 거짓 긍정을 방지할 수 있습니다.

제공된 예제에 이 방법을 적용합니다. :

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

.contains 메소드나 수정된 ​​indexOf 함수를 사용하면 요소에 특정 클래스가 포함되어 있는지 확실하게 확인할 수 있습니다. 브라우저 호환성이나 부분 일치 여부와 관계없이 JavaScript입니다.

위 내용은 JavaScript에서 특정 클래스의 존재를 확실하게 확인하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!