ตรวจสอบว่าองค์ประกอบมีคลาสใน JavaScript หรือไม่?

ใช้ JavaScript ธรรมดา (ไม่ใช่ jQuery) มีวิธีการตรวจสอบว่าองค์ประกอบมีคลาสหรือไม่?

ขณะนี้ฉันกำลังทำสิ่งนี้:

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

ใช้งานได้กับเบราว์เซอร์ปัจจุบันทั้งหมดและมี polyfills ให้การสนับสนุนเบราว์เซอร์รุ่นเก่าด้วย

อีกทางเลือกหนึ่งถ้าคุณทำงานกับเบราว์เซอร์รุ่นเก่าและไม่ต้องการใช้โพลีเติมเพื่อแก้ไขพวกเขาการใช้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;
    }
}

มันซ้ำซ้อนน้อยกว่า;)

วิธีแก้ปัญหาที่ง่ายและมีประสิทธิภาพกำลังพยายามหาวิธี

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 )

polyfill

หากคุณต้องการที่จะใช้Element.classListแต่คุณยังต้องการที่จะสนับสนุนเบราว์เซอร์รุ่นเก่าพิจารณาใช้polyfill นี้โดยอีไลสีเทา

เนื่องจากเขาต้องการใช้สวิตช์ () ฉันประหลาดใจที่ยังไม่มีใครพูดถึงเรื่องนี้:

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 :

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

และทริกเกอร์แบบนี้ (คล้ายกับ.hasClass()ฟังก์ชั่นของ jQuery ):

document.getElementById('MyDiv').hasClass('active');

ผู้เผยแพร่เองที่เรียบง่าย: ¹

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

¹ indexOfสำหรับอาร์เรย์ไม่รองรับ IE (ofcourse) มีแผ่นแปะลิงมากมายที่จะพบได้บนอินเทอร์เน็ต

นี่เก่าไปหน่อย แต่บางทีมีใครบางคนอาจหาวิธีแก้ปัญหาของฉันได้:

// 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. กลอุบายของเฟลิกซ์ในการเพิ่มช่องว่างเพื่อให้ className อยู่ด้านข้างและสตริงที่คุณค้นหานั้นเป็นวิธีที่เหมาะสมในการพิจารณาว่าองค์ประกอบนั้นมีคลาสหรือไม่

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 ใน fns) ทำซ้ำผ่านปุ่มต่าง ๆ ในแผนที่ fns
   • ไม่มีการหยุดพักหลังจาก fnsi อนุญาตให้เรียกใช้โค้ดเมื่อใดก็ตามที่มีการแข่งขัน - ดังนั้นหากองค์ประกอบมี fi, class1 และ class2 ทั้ง fn1 และ fn2 จะถูกดำเนินการ
   • ข้อดีของวิธีการนี้คือรหัสที่ใช้ในแต่ละคลาสนั้นเป็นกฎเกณฑ์เช่นเดียวกับในคำสั่ง switch ในตัวอย่างของคุณทุกกรณีทำการดำเนินการที่คล้ายกัน แต่พรุ่งนี้คุณอาจต้องทำสิ่งต่าง ๆ สำหรับแต่ละคน
   • คุณอาจจำลองกรณีเริ่มต้นโดยให้ตัวแปรสถานะบอกว่าพบการแข่งขันในลูปหรือไม่

ฉันจะโพลีเติมฟังก์ชั่น 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เอาตัวเลขจาก

มันค่อนข้างแฮ็ก แต่ใช้งานได้กับสวิตช์แบบยาวโดยไม่มีฟังก์ชั่นหรือลูปเพิ่มเติม

ดูลิงค์ Codepen นี้สำหรับวิธีที่รวดเร็วและง่ายในการตรวจสอบองค์ประกอบหากมีคลาสเฉพาะโดยใช้ JavaScript วานิลลา ~!

hasClass (Vanilla JS)

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

สิ่งนี้ได้รับการสนับสนุนบน IE8 +

ก่อนอื่นเราตรวจสอบว่าclassListมีอยู่หากเราสามารถใช้containsวิธีการที่ IE10 + สนับสนุน ถ้าเราอยู่บน IE9 หรือ 8 มันกลับไปใช้ regex ซึ่งไม่ได้มีประสิทธิภาพ แต่เป็น polyfill สั้น ๆ

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

หลักสูตรนี้เป็นเพียงการค้นหา 1 องค์ประกอบที่เรียบง่าย<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 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'));
}