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
답변
가장 효과적인 라이너
- 부울을 반환합니다 (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가 모든 것을 수행하는 방법을 보여주는 위치를 원한다면 다음을 제안합니다.
답변
// 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;
}