Tìm hiểu JavaScript classList: Add, remove & toggle

classList trong JavaScript là thuộc tính read-only trả về một DOMTokenList chứa danh sách class của các phần tử. Sử dụng classList giúp chúng ta dễ dàng thao tác với danh sách class của phần tử. Chúng ta cùng tìm hiểu về nó trong bài viết này nhé!

Lấy danh sách class của phần tử bằng JavaScript

Chúng ta cùng xem ví dụ dưới đây, mình sẽ tạo một phần tử HTML có một số class như sau:

<div class="color-red bold" id="blogName">homiedev.com</div>

Trong JavaScript, để lấy danh sách class của một phần tử chúng ta làm như sau:

const element = document.getElementById("blogName");

console.log(element.classList);

Kết quả:

DOMTokenList(2) ['color-red', 'bold', value: 'color-red bold']

Ví dụ trên, element.classList trả về một DOMTokenList chứa các class của phần tử. Từ đây chúng ta có thể thao tác lên object này, cùng xem tiếp nhé 😃.

Thêm class cho phần tử HTML

Để thêm class cho phần tử HTML bằng Vanilla JavaScript chúng ta làm như sau:

const element = document.getElementById("blogName");

element.classList.add("uppercase");
console.log(element.classList);

Như các bạn thấy bên dưới, sau khi sử dụng method add chúng ta đã thêm được class uppercase cho element.

DOMTokenList(3) ['color-red', 'bold', 'uppercase', value: 'color-red bold uppercase']

Chúng ta có thể thêm nhiều class cho phần tử bằng cách thêm các class vào method add.

element.classList.add("font-size-14","underline");

Xóa class của một phần tử HTML

Để xóa class của phần tử chúng ta sử dụng method remove như ví dụ bên dưới:

const element = document.getElementById("blogName");

element.classList.remove("bold", "uppercase");
console.log(element.classList);

Add/remove class của một phần tử HTML

Trong một số tình huống, chúng ta muốn thêm hoặc xóa class tùy theo phần tử đã có class đó hay chưa, ví dụ một phần tử sẽ hiển thị hoặc bị ẩn sau khi bạn nhấp vào nó.

Ví dụ phần tử dưới đây đã có class bold, chúng ta sử dụng method toggle và xem kết quả:

const element = document.getElementById("blogName");
console.log(element.classList);
// DOMTokenList(2) ['color-red', 'bold', value: 'color-red bold']

element.classList.toggle("bold");
console.log(element.classList);
// DOMTokenList ['color-red', value: 'color-red']

Bằng cách sử dụng toggle, JavaScript sẽ kiểm tra class bold đã tồn tại trên phần tử hay chưa. Nếu đã có thì sẽ bỏ class này, nếu chưa thì thêm vào phần tử.

Ngoài ra, ở tham số thứ hai của toggle, các bạn có thể thêm điều kiện kiểm tra để add/remove class:

// add/remove class bold, dựa theo điều kiện i < 1
div.classList.toggle("bold", i < 1);

Nếu điều kiện trả về true, class sẽ được thêm vào phần tử, nếu là false class sẽ được xóa khỏi phần tử.

Kiểm tra tồn tại class

Nếu muốn kiểm tra xem phần tử đã có class được chỉ định hay chưa, các bạn có thể làm như sau:

console.log(element.classList.contains('bold')); // true

Kết quả trả về true có nghĩa là phần tử đã có class bold.

Thay thế class

Ngoài việc thêm, xóa chúng ta có thể thay thế class đã có trên phần tử bằng class khác, bằng cách sử dụng method replace:

element.classList.replace('bold', 'normal');
console.log(element.classList);

Kết quả:

DOMTokenList(2) ['color-red', 'normal', value: 'color-red normal']

Hi vọng sau bài viết này, các bạn có thể hiểu được cách sử dụng một số method của classList. Chúc các bạn học tốt. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé.