일반 JavaScript를 사용한 "hasClass"기능은 무엇입니까?
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);
}
// 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>사용중인 클래스를 저장하는 속성은 className입니다.
그래서 당신은 말할 수 있습니다 :
if (document.body.className.match(/\bmyclass\b/)) {
....
}
jQuery가 모든 것을 수행하는 방법을 보여주는 위치를 원한다면 다음을 제안합니다.
http://code.jquery.com/jquery-1.5.js
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;
}
다른 클래스 조작에 대해서는 여기 에서 전체 파일을 참조 하십시오 .
이것에 대한 좋은 해결책은 classList와 함께 작동하고 포함하는 것입니다.
나는 이것을 이렇게했다 :
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
따라서 요소가 필요하고 클래스 목록을 확인하십시오. 클래스 중 하나가 검색 한 클래스와 동일하면 true를 반환하고 그렇지 않으면 false를 반환합니다.
다음과 같은 것을 사용하십시오 :
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
이 'hasClass'기능은 IE8 +, FireFox 및 Chrome에서 작동합니다.
hasClass = function(el, cls) {
var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
return target.className.match(regexp);
}
위의 모든 대답은 꽤 좋지만 여기에 작은 간단한 기능이 있습니다. 꽤 잘 작동합니다.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}
이 접근법에 대해 어떻게 생각하십니까?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
https://jsfiddle.net/5sv30bhe/
참고 URL : https://stackoverflow.com/questions/5085567/what-is-the-hasclass-function-with-plain-javascript
'Programing' 카테고리의 다른 글
| 개발을위한 장치 설정 (???????????? 권한 없음) (0) | 2020.03.26 |
|---|---|
| PDOException SQLSTATE [HY000] [2002] 해당 파일 또는 디렉토리가 없음 (0) | 2020.03.26 |
| UIButton에서 텍스트의 오른쪽에 이미지를 어떻게 배치합니까? (0) | 2020.03.26 |
| Quasiquote에서 Shapeless를 사용하는 방법? (0) | 2020.03.26 |
| EditText 변경된 리스너에서 문자 계산 (0) | 2020.03.26 |