요소에 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에서 지원되지 않습니다 (물론). 인터넷에서 찾을 수있는 원숭이 패치가 많이 있습니다.

이것은 조금 오래되었지만 누군가 내 솔루션이 도움이 될 수 있습니다.

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

className는 문자열 일 뿐이므로 일반 indexOf 함수를 사용하여 클래스 목록에 다른 문자열이 포함되어 있는지 확인할 수 있습니다.

나는 많은 답변을 알고 있지만 대부분은 추가 기능과 추가 클래스입니다. 이것은 내가 개인적으로 사용하는 것입니다. 훨씬 더 깨끗하고 훨씬 적은 코드 줄!

if( document.body.className.match('category-page') ) { 
  console.log('yes');
}

대소 문자를 구분하지 않는 사소한 해결책은 다음과 같습니다.

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}

요소에 클래스 이름이 하나만 있으면 클래스 속성을 가져 와서 빠르게 확인할 수 있습니다. 다른 답변은 훨씬 강력하지만 분명히 유스 케이스가 있습니다.

if ( element.getAttribute('class') === 'classname' ) {

}

classList가능한 경우을 사용하는 프로토 타입 방법을 만들었습니다 indexOf.

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
  
    if( this == null || !classArr || !className ) return false;
  
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');

    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;

    return hasClass == classArr.length;
};


///////////////////////////////
// TESTS (see browser's console when inspecting the output)

var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text

console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );

console.log( elm2, ' has class "a": ', elm2.hasClass('a') );

// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );

console.log( elm4, ' has class "a": ', elm4.hasClass('a') );

<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

테스트 페이지

1. 클래스 이름 옆에 공백을 추가하는 Felix의 트릭과 검색하려는 문자열은 요소에 클래스가 있는지 여부를 결정하는 올바른 방법입니다.

2. 클래스에 따라 다른 동작을하려면 맵 내에서 함수 참조 또는 함수를 사용할 수 있습니다.

   function fn1(element){ /* code for element with class1 */ }
   
   function fn2(element){ /* code for element with class2 */ }
   
   function fn2(element){ /* code for element with class3 */ }
   
   var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};
   
   for(var i in fns) {
       if(hasClass(test, i)) {
           fns[i](test);
       }
   }

   • for (var i in fns)는 fns 맵 내 키를 반복합니다.
   • fnsi 이후에 중단이 없으면 일치하는 항목이있을 때마다 코드를 실행할 수 있으므로 요소에 fi, class1 및 class2가 있으면 fn1 및 fn2가 모두 실행됩니다.
   • 이 접근법의 장점은 각 클래스에 대해 실행할 코드가 switch 문의 코드와 같이 임의적이라는 것입니다. 귀하의 예에서 모든 사례는 비슷한 작업을 수행했지만 내일에는 각기 다른 작업을 수행해야 할 수도 있습니다.
   • 루프에서 일치 여부를 알려주는 상태 변수를 사용하여 기본 사례를 시뮬레이션 할 수 있습니다.

Poly는 classList 기능을 채우고 새로운 구문을 사용합니다. 이런 식으로 최신 브라우저는 새로운 구현을 사용하고 (훨씬 더 빠름), 오래된 브라우저 만 코드에서 성능 저하를 가져옵니다.

https://github.com/remy/polyfills/blob/master/classList.js

이것은 약간 꺼져 있지만 스위치를 트리거하는 이벤트가 있으면 클래스없이 할 수 있습니다.

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

넌 할 수있어

$('body').click( function() {

    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }

});

.replace(/[0-9]/g, '')에서 숫자를 제거합니다 id.

약간 해 키지 만 추가 기능이나 루프가없는 긴 스위치에서 작동합니다.

vanilla JavaScript를 사용하여 특정 클래스가있는 경우 요소를 빠르고 쉽게 확인하는 방법은이 Codepen 링크를 참조하십시오 ~!

hasClass (바닐라 JS)

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

이것은 IE8 +에서 지원됩니다.

먼저 classList존재하는 경우 containsIE10 +에서 지원 하는 방법을 사용할 수 있는지 확인합니다 . 우리가 IE9 또는 8을 사용하는 경우 정규 표현식을 사용하는 것으로 돌아갑니다. 이는 효율적이지 않지만 간결한 폴리 필입니다.

if (el.classList) {
  el.classList.contains(className);
} else {
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

또는 babel로 컴파일하는 경우 간단하게 사용할 수 있습니다. el.classList.contains(className);

이거 한번 해봐:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

완벽한 해결책은 이것이라고 생각합니다.

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

어떤 요소에서 현재 '.bar'클래스입니까? 여기 또 다른 해결책이 있지만 그것은 당신에게 달려 있습니다.

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle 데모

물론 이것은 하나의 간단한 요소 <img>( /Image/g)에 대한 조회 일뿐 이지만 <li>is /LI/g, <ul>= /UL/g등 의 배열에 모두 넣을 수 있습니다 .

인라인 SVG 요소 내에서 클래스 이름을 찾으려고 노력하는 사람들에게 답을 추가하십시오.

hasCLass()기능을 다음과 같이 변경하십시오 .

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

className속성 을 사용하는 대신 getAttribute()메서드를 사용 하여 클래스 이름을 가져와야합니다.

나는 내 웹 사이트를 위해 이러한 기능을 만들었으며 바닐라 자바 ​​스크립트 만 사용합니다. 아마도 누군가를 도울 것입니다. 먼저 HTML 요소를 얻는 함수를 만들었습니다.

//return an HTML element by ID, class or tag name
    var getElement = function(selector) {
        var elements = [];
        if(selector[0] == '#') {
            elements.push(document.getElementById(selector.substring(1, selector.length)));
        } else if(selector[0] == '.') {
            elements = document.getElementsByClassName(selector.substring(1, selector.length));
        } else {
            elements = document.getElementsByTagName(selector);
        }
        return elements;
    }

그런 다음 제거 할 클래스와 요소의 선택자를받는 함수 :

var hasClass = function(selector, _class) {
        var elements = getElement(selector);
        var contains = false;
        for (let index = 0; index < elements.length; index++) {
            const curElement = elements[index];
            if(curElement.classList.contains(_class)) {
                contains = true;
                break;
            }
        }
        return contains;
    }

이제 다음과 같이 사용할 수 있습니다.

hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')

그것이 도움이되기를 바랍니다.

팁 : 가능한 한 프로젝트에서 jQuery의 종속성을 제거하십시오 ( VanillaJS) .

document.firstElementChild<html>태그를 반환 하면 classList속성이 추가 된 모든 클래스를 반환합니다.

if(document.firstElementChild.classList.contains("your-class")){
    // <html> has 'your-class'
} else {
    // <html> doesn't have 'your-class'
}

나를 위해 가장 우아하고 빠른 방법은 다음과 같습니다.

function hasClass(el,cl){
   return !!el.className && !!el.className.match(new RegExp('\\b('+cl+')\\b'));
}