요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

programing

요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

goodcopy 2023. 1. 20. 16:30

요소에 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를 누릅니다

사용 .contains★★★★

element.classList.contains(class);

이 기능은 현재 모든 브라우저에서 작동하며 오래된 브라우저를 지원하는 폴리필도 있습니다.

또는 오래된 브라우저를 사용하여 수정하기 위해 폴리필을 사용하지 않으려면 를 사용하는 것이 맞지만 약간 수정해야 합니다.

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의 메서드:

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'),
    'main main-content' : testElement.classList.contains('main main-content')
});

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

지원되는 브라우저

(캔부터)IUse.com)

폴리필

사용하지만 오래된 브라우저를 지원하려면 Eli Grey의 이 폴리필 사용을 고려해 보십시오.

Element.matches()

element.matches(selectorString)

MDN Web Docs에 따르면:

메서드가 반환됩니다.true문자열에 요소가 , 않은 경우는 「」를 반환합니다.false.

따라서 를 사용하여 요소에 클래스가 포함되어 있는지 여부를 확인할 수 있습니다.

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

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

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

View 브라우저 호환성

그가 스위치를 사용하길 원하기 때문에, 아직 아무도 이것을 제안하지 않은 것이 놀랍습니다.

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/>";
    }
}

jQuery를 사용하지 않고 wether 요소에 클래스가 포함되어 있는지 확인하려는 경우 다음과 같은 작은 조각이 있습니다.

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');

이것은 조금 오래된 것이지만, 누군가가 제 솔루션이 도움이 될 것입니다.

// 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 함수를 사용하여 클래스 목록에 다른 문자열이 포함되어 있는지 확인할 수 있습니다.

단순화된 오닐라이너:¹

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

¹ indexOfIE를 사용하다인터넷에는 그것을 위한 원숭이 패치가 많이 있다.

많은 답변이 있다는 것을 알지만, 대부분은 부가기능과 부가수업을 위한 것입니다.이것은 내가 개인적으로 사용하는 것입니다. 훨씬 깔끔하고 코드 줄도 적습니다!

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

에는 꽤 할 수 있습니다.element.classList.contains()하지만 사람들은 그들의 대답에 대해 꽤 사치스러워졌고, 몇 가지 대담한 주장을 했기 때문에, 나는 벤치마크를 실행했다.

각 테스트는 1000회 반복되므로 대부분의 테스트는 여전히 매우 빠릅니다.특정 작업에 광범위하게 의존하지 않는 한 성능 차이는 없습니다.

기본적으로 모든 방법으로 몇 가지 테스트를 해봤습니다.내 컴퓨터(Win 10, 24gb, i7-8700)에서는 classList.contains가 매우 잘 수행되었습니다.className.split(' ')도 실질적으로 동일합니다.

우승자는 ★★★★★★★★★★★★★★★★★★★★.classList.contains()가 classList가 undefined,~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ')

제가.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>

테스트 페이지

요소에 클래스가 포함되어 있는지 여부를 확인하려면 요소의 classList 속성의 contains() 메서드를 사용합니다.*

element.classList.contains(className);

* 다음과 같은 요소가 있다고 가정합니다.

<div class="secondary info">Item</div>*

요소에 세컨더리 클래스가 포함되어 있는지 확인하려면 다음 코드를 사용합니다.

 const div = document.querySelector('div');
 div.classList.contains('secondary'); // true

다음은 요소에 클래스 오류가 없기 때문에 false를 반환합니다.

 const div = document.querySelector('div');
 div.classList.contains('error'); // false

다음은 대소문자를 구분하지 않는 간단한 솔루션입니다.

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;
}

felix는 className과 검색하려는 문자열 옆에 공백을 추가하는 방법으로 요소에 클래스가 있는지 여부를 판단합니다.
클래스에 따라 다른 동작을 취하려면 지도 내에서 함수 참조 또는 함수를 사용할 수 있습니다.
```
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(fns의 var i)는 fns 맵 내의 키를 반복합니다.
- fnsi 뒤에 브레이크가 없으면 일치할 때마다 코드가 실행되므로 f.i.class1 및 class2 요소가 있으면 fn1과 fn2가 모두 실행됩니다.
- 이 접근방식의 장점은 각 클래스에 대해 실행하는 코드가 스위치스테이트먼트의 코드와 같이 임의적이라는 것입니다.이 예에서는 모든 케이스가 같은 조작을 실행했지만, 내일은 각각 다른 조작을 실시할 필요가 있을 수 있습니다.
- 루프에서 일치가 검출되었는지 여부를 나타내는 상태 변수를 사용하여 기본 케이스를 시뮬레이트할 수 있습니다.

요소에 클래스 이름이 하나만 있는 경우 클래스 속성을 가져와 빠르게 확인할 수 있습니다.다른 답변은 훨씬 더 강력하지만, 이 답변에는 분명히 사용 사례가 있습니다.

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

}

바닐라 JavaScript를 사용하여 특정 클래스가 있는지 요소를 빠르고 쉽게 확인하는 방법은 이 Codepen 링크를 참조하십시오.

hasClass(Vanilla JS)

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

이는 IE8+에서 지원됩니다.

먼저 확인하겠습니다.classList요.containsIE10+의 경우IE9 또는 8을 사용하는 경우 효율은 떨어지지만 간결한 폴리필인 regex를 사용해야 합니다.

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

수 .el.classList.contains(className);

classList 기능을 Poly로 채우고 새로운 구문을 사용합니다.이렇게 하면 새로운 브라우저가 새로운 구현(더 빠른 속도)을 사용하고 오래된 브라우저만이 코드에서 성능에 영향을 미칩니다.

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, '') 、 [ Digits ]를 삭제합니다.id.

다소 허술하지만, 추가 기능이나 루프가 없는 긴 스위치로 동작합니다.

class List를 사용하는 것도 이상적입니다.

HTML

<div id="box" class="myClass"></div>

자바스크립트

const element = document.querySelector("#box");

element.classList.contains("myClass");

하는 바와 같이, 「」는 「」입니다.Element.className할 수 .indexOf()★★★★

element.className.indexOf('animated') > -1

indexOf »classList.contains 를 사용합니다.indexOf조금 더 빠른 것 같아요.저는 그것을 확인하기 위해 간단한 벤치마크 성능 테스트를 실시했습니다.다음은 저의 조사 결과입니다.ClassName.indexOf 와 ClassList. 가 포함되어 있습니다.

이것을 사용해 보세요.

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>/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>다음에 태그를 붙입니다.classListattribute는 추가된 모든 클래스를 반환합니다.

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

부터.className스트링입니다.스트링 메서드를 사용하여 이 명령어를 사용할 수중에 있는지 여부를 확인할 수 있습니다..className에는 클래스 이름이 포함됩니다.

element.className.includes("class1")

가장 우아하고 빠르게 이 목표를 달성할 수 있는 방법은 다음과 같습니다.

function hasClass(el, cl) {
        return el.classList ? el.classList.contains(cl) : !!el.className && !!el.className.match(new RegExp('(?: |^)' + cl + '(?: |$)'));
    }

언급URL : https://stackoverflow.com/questions/5898656/check-if-an-element-contains-a-class-in-javascript

저작자표시 (새창열림)

'programing' 카테고리의 다른 글

라디오 버튼을 끄려면 어떻게 해야 하나요? (0)	2023.01.20
SELECT의 변수 할당 평가 순서는 반환되는 행 순서와 다를 수 있습니다.어떤 상황에서 이런 일이 일어날 수 있나요? (0)	2023.01.20
python을 사용하여 단순 XML 파일 만들기 (0)	2023.01.20
PHP의 Date Time 클래스에서 Date Time-> date에 액세스할 수 없는 이유는 무엇입니까? (0)	2023.01.20
django Forms에서 css 클래스를 정의합니다. (0)	2023.01.20

현재글요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

C, spring, C#, spring3, vuejs2, Java, jquery, c++, javascript,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

goodcopy

요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

데모

지원되는 브라우저

폴리필

Element.matches()

테스트 페이지

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

요소에 JavaScript의 클래스가 포함되어 있는지 확인하시겠습니까?

데모

지원되는 브라우저

폴리필

Element.matches()

테스트 페이지

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바