วิธีตรวจสอบว่า Element มี Class นั้นๆ ใน JavaScript

เมธอด hasClass()

JavaScript ไม่มี hasClass() ตัวจริง (เป็นของ jQuery) แต่สามารถเขียนฟังก์ชันเองได้ง่ายๆ

ตัวอย่างโค้ด

<html>
<body>
  <div id="test" class="myClass"></div>
  <script>
    function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    
    var val1 = document.getElementById('test');
    alert(hasClass(val1, 'myClass')); // true
  </script>
</body>
</html>

วิธีสมัยใหม่: classList.contains() (แนะนำ)

Browser รุ่นใหม่รองรับ classList API ซึ่งสะดวกและเร็วกว่า:

var element = document.getElementById('test');

// ตรวจสอบ class
if (element.classList.contains('myClass')) {
  console.log('มี class myClass');
}

// เพิ่ม class
element.classList.add('newClass');

// ลบ class
element.classList.remove('myClass');

// สลับ class (toggle)
element.classList.toggle('active');

// แทนที่ class
element.classList.replace('oldClass', 'newClass');

ความแตกต่างระหว่าง className และ classList

Polyfill สำหรับ IE9 และเก่ากว่า

if (!('classList' in document.documentElement)) {
  Object.defineProperty(HTMLElement.prototype, 'classList', {
    get: function() {
      var self = this;
      function update(fn) {
        return function(value) {
          var classes = self.className.split(/\s+/);
          var index = classes.indexOf(value);
          fn(classes, index, value);
          self.className = classes.join(' ');
        };
      }
      return {
        add: update(function(classes, index, value) {
          if (index === -1) classes.push(value);
        }),
        remove: update(function(classes, index) {
          if (index !== -1) classes.splice(index, 1);
        }),
        toggle: update(function(classes, index, value) {
          if (index === -1) classes.push(value);
          else classes.splice(index, 1);
        }),
        contains: function(value) {
          return self.className.split(/\s+/).indexOf(value) !== -1;
        }
      };
    }
  });
}

สรุป

สมัยใหม่ควรใช้ element.classList.contains('className') ซึ่งเป็นมาตรฐาน เร็ว และอ่านง่าย สำหรับ Browser เก่าสามารถใช้ Polyfill หรือฟังก์ชัน hasClass แบบดั้งเดิมได้