Các hàm xử lý class trong javascript

0
1943
avascript la gi, hoc javascript co kho khong
Bài số 25 trong 35 bài của 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.

các hàm xử lý class trong javascript

Các hàm xử lý class trong javascript

classList.add()

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

Ví dụ:

  1. Truy xuất thẻ <h1>
  2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1> 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ẻ <h1>

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ẻ <h1>
  2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1>
  3. Dùng lệnh x[0].classList.remove('TXT') để bỏ class “TXT” khỏi thẻ <h1>
  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ẻ <h1>
  2. Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1>
  3. Dùng lệnh x[0].classList.toggle('ADD') để thêm class “ADD” vào thẻ<h1> 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ẻ <h1> 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

Các bài viết trong SeriesBài trước: Một số cách truy xuất phần tử HTML nên biếtBài sau: Chế độ strict của JavaScript
avatar
  Subscribe  
Notify of