[javascript] 요소에 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>

… 더 이상 정확하게 일치하지 않으므로 아무것도 ( "") 의 기본 출력을 얻습니다 . 하지만 난 여전히 출력이되고 싶어 I have class1(가) 때문에 <div>여전히 포함.class1 클래스를.

답변

사용 방법 :element.classList .contains

element.classList.contains(class);

이것은 모든 현재 브라우저에서 작동하며 이전 브라우저를 지원하기위한 폴리 필이 있습니다.

또는 이전 브라우저로 작업하고 폴리 필을 사용하여 수정하지 않으려면 사용하는 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;
    }
}

또한 덜 중복됩니다.)

답변

쉽고 효과적인 솔루션은 .contains 방법을 시도하고 있습니다.

test.classList.contains(testClass);

답변

최신 브라우저에서는 다음 contains방법을 사용할 수 있습니다 Element.classList.

testElement.classList.contains(className)

데모

var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
});

<div id="test" class="main main-content content"></div>

스 니펫 확장

지원되는 브라우저

( CanIUse.com에서 )

폴리 필

당신이 사용하려는 경우 Element.classList하지만 당신은 또한 이전 버전의 브라우저를 지원하려면, 사용을 고려 이 polyfill을 하여 엘리 회색 .

답변

그는 switch ()를 사용하기를 원하기 때문에 아무도 이것을 아직 발표하지 않은 것에 놀랐습니다.

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

답변

Element.matches ()

element.matches (selectorString)

MDN Web Docs 에 따르면 :

Element.matches()메소드가 리턴 true요소가 지정된 선택 문자열에 의해 선택 될 경우; 그렇지 않으면를 반환합니다 false.

따라서 Element.matches()요소에 클래스가 포함되어 있는지 확인하는 데 사용할 수 있습니다 .

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true

<div id="example" class="foo bar"></div>

스 니펫 확장

브라우저 호환성보기

답변

다음은 약간의 스 니펫입니다. jQuery를 사용하지 않고 요소에 클래스가 포함되어 있는지 확인하십시오.

function hasClass(element, className) { return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className); }

이는 요소가 공백으로 구분 된 여러 클래스 이름을 포함 할 수 있다는 사실을 설명합니다.

또는

이 기능을 요소 프로토 타입에 할당 할 수도 있습니다.

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

그리고 이것을 jQuery의 .hasClass()기능 과 매우 유사한 방식으로 트리거하십시오 .

document.getElementById('MyDiv').hasClass('active');

답변

단순화 된 oneliner : ¹

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

indexOf배열의 경우¹ 은 IE에서 지원되지 않습니다 (물론). 인터넷에서 찾을 수있는 원숭이 패치가 많이 있습니다.