일반 JavaScript를 사용한 “hasClass”기능은 무엇입니까? jQuery를 어떻게 수행 합니까?

hasClass일반 ol ‘JavaScript로 jQuery를 어떻게 수행 합니까? 예를 들어

<body class="foo thatClass bar">

JavaScript를 사용하는 방법 <body>은 thatClass무엇입니까?

답변

element.className일치 하는지 확인할 수 있습니다 /\bthatClass\b/.
\b단어 나누기와 일치합니다.

또는 jQuery 자체 구현을 사용할 수 있습니다.

var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )

더 일반적인 질문에 대답하기 위해 github에서 또는 이 소스 뷰어에서 소스 의 jQuery 소스 코드 를 볼 수 있습니다 .hasClass

답변

간단히 사용하십시오 classList.contains():

if (document.body.classList.contains('thatClass')) {
    // do some stuff
}

다른 용도 classList:

document.body.classList.add('thisClass');
// $('body').addClass('thisClass');

document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');

document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');

브라우저 지원 :

  • 크롬 8.0
  • Firefox 3.6
  • IE 10
  • 오페라 11.50
  • 사파리 5.1

classList 브라우저 지원

답변

가장 효과적인 라이너

  • 부울을 반환합니다 (Orbling의 답변과 반대).
  • thisClass가있는 요소를 검색 할 때 오 탐지를 반환하지 않습니다 class="thisClass-suffix".
  • IE6 이상까지 모든 브라우저와 호환 가능
function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

답변

사용중인 클래스를 저장하는 속성은 className입니다.

그래서 당신은 말할 수 있습니다 :

if (document.body.className.match(/\bmyclass\b/)) {
    ....
}

jQuery가 모든 것을 수행하는 방법을 보여주는 위치를 원한다면 다음을 제안합니다.

http://code.jquery.com/jquery-1.5.js

답변

// 1. Use if for see that classes:

if (document.querySelector(".section-name").classList.contains("section-filter")) {
  alert("Grid section");
  // code...
}
<!--2. Add a class in the .html:-->

<div class="section-name section-filter">...</div>

스 니펫 확장

답변

hasClass 함수 :

HTMLElement.prototype.hasClass = function(cls) {
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] == cls) {
            return true;
        }
    }
    return false;
};

addClass 함수 :

HTMLElement.prototype.addClass = function(add) {
    if (!this.hasClass(add)){
        this.className = (this.className + " " + add).trim();
    }
};

removeClass 함수 :

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName.trim();
};

답변

나는 단순 / 최소 솔루션, 한 줄, 크로스 브라우저를 사용하고 레거시 브라우저에서도 작동합니다.

/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'

이 방법은 폴리 필을 필요로하지 않기 때문에 유용합니다.classList 성능면에서 훨씬 좋습니다. 적어도 나에게는.

업데이트 : 나는 지금 사용하는 모든 라운드 솔루션 인 작은 폴리 필을 만들었습니다.

function hasClass(element,testClass){
  if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better

//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
  return false;
}

다른 클래스 조작에 대해서는 여기 에서 전체 파일을 참조 하십시오 .