Hướng dẫn classlist.toggle trong javascript

This entry is part 25 of 35 in the series Tự học lập trình Javascript

Các hàm xử lý class trong javascript là gì ? Để viết hiệu ứng bằng javascript chúng ta phải xử lý bằng css , xử lý css chính là thông qua class để xử lý.  Phương pháp hiệu quả nhất hiện nay chính là kết hợp js và css thông qua class để xử lý. Mà để thông qua được class thì chúng ta lại phải biết các hàm xử lý class trong javascript. Và các hàm xử lý class lại có trong bài viết này của mình :D.

classList.add()

Hàm này sẽ thêm một class vào thẻ html.

Ví dụ:

1. Truy xuất thẻ

2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ

   hay chưa, các bạn nên làm bước này để sai còn biết mà mò ngay. Viết nhiều code rồi thấy lỗi mò bao giờ cho ra 😀

3. Dùng lệnh x[0].classList.add('style') để thêm class “style” vào thẻ

Ok mình đã thêm cái class “style” vào, giờ mình sẽ thêm css cho nó.

classList.remove() 

Hàm này sẽ bỏ class trong thẻ html

1. Truy xuất thẻ

2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ

3. Dùng lệnh x[0].classList.remove('TXT') để bỏ class “TXT” khỏi thẻ

4. console.log(x[0]) để kiểm tra kết quả, bây giờ class “TXT” mất tiêu rồi.

classList.toggle() 

Hàm này rất là hay luôn :v bạn có thể hiểu thế này có rồi thì nó bỏ , còn chưa có thì nó sẽ thêm vào.

1. Truy xuất thẻ

2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ

3. Dùng lệnh x[0].classList.toggle('ADD') để thêm class “ADD” vào thẻ

    vì “ADD” chưa có nên nó thêm vào

4. Dùng lệnh x[0].classList.toggle('SUB') để thêm class “SUB” khỏi thẻ

    vì có rồi nên nó bỏ đi.

5. console.log(x[0]) để kiểm tra kết quả, bây giờ class “SUB” biến mất , còn “ADD” được thêm vào.

Ok xong ! Thông báo: sau này khi bạn viết hiệu ứng nào bằng js thì cũng luôn có sự góp mặt của 3 hàm này :D. Mình xin kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây