Hướng dẫn này sẽ giải thích quy trình thêm một lớp đang hoạt động trong JavaScript.
Làm thế nào để Thêm Lớp Hoạt động trong JavaScript?
Để thêm một lớp đang hoạt động, chúng tôi sẽ sử dụng các phương pháp sau:
Hãy chuyển sang phương pháp đầu tiên!
Phương pháp 1: Sử dụng document.getElementById () Với phương thức classList.add () để thêm lớp hoạt động trong JavaScript
Trong JavaScript, “ document.getElementById () ”Được sử dụng để truy cập một phần tử nhất định bằng id của nó. Tuy nhiên, nó chỉ chọn các phần tử dựa trên id của chúng chứ không phải các lớp. Bạn có thể sử dụng nó với “ classList.add () ”Để thêm một lớp đang hoạt động trong JavaScript.
Hãy khám phá phương pháp này bằng cách lấy một ví dụ.
Thí dụ
Trong tệp HTML của chúng tôi, chúng tôi sẽ sử dụng “ ”Với một số văn bản, chỉ định id của nó là“ txt ”Và thêm một“ trong một cái nhấp chuột 'Sự kiện sẽ kích hoạt' hoạt động() ' hàm số. Lưu ý rằng, hãy thêm thẻ
trong thẻ
: < id p = 'txt' trong một cái nhấp chuột = 'hoạt động()' > Nhấn vào đây P >Trong tệp JavaScript, hãy xác định hàm active () theo cách mà nó truy cập đầu tiên vào phần tử đoạn bằng cách sử dụng id của nó trong phương thức document.getElementbyId (). Sau đó, thêm một lớp CSS vào danh sách lớp của nó cho các mục đích tạo kiểu:
kích hoạt chức năng ( ) {
đây là một = tài liệu. getElementById ( 'txt' ) ;
một. classList . cộng ( 'lớp mới' ) ;
}
Trong tệp CSS, hãy đặt một dấu chấm trước “ lớp mới ”Và chỉ định“ màu nền 'Thuộc tính một giá trị' trái cam ”:
. lớp mới {lai lịch - màu sắc : trái cam ;
}
Do đó, khi bạn nhấp vào phần tử đoạn văn, thuộc tính nền đã thêm sẽ được áp dụng cho nó:
Chúng ta hãy xem xét phương thức sau đây, trong đó chúng ta sẽ sử dụng document.querySelector () để thêm một lớp đang hoạt động.
Phương pháp 2: Sử dụng document.querySelector () Với phương thức classList.add () để thêm lớp hoạt động trong JavaScript
Trong JavaScript, “ document.querySelector () ”Được sử dụng để lấy phần tử đầu tiên từ mã. Bạn có thể chỉ định cả lớp và id trong phương thức querySelector (). Nó có thể được sử dụng với “ classList.add () ”Để thêm một lớp đang hoạt động trong JavaScript.
Thí dụ
Bây giờ chúng tôi sẽ chỉ sử dụng “ document.querySelector () 'Với id' #txt ”Để chọn thành phần đoạn văn. Một lần nữa, phương thức classList.add () sẽ được sử dụng để thêm hoạt động “ lớp mới ”:
kích hoạt chức năng ( ) {đây là một = tài liệu. querySelector ( '#txt' ) ;
một. classList . cộng ( 'lớp mới' ) ;
}
Đầu ra
Chúng tôi đã học hai phương pháp đơn giản nhất để thêm lớp hoạt động trong JavaScript
Sự kết luận
Để thêm lớp đang hoạt động, chúng tôi có thể sử dụng “ getElementById () ' hoặc ' querySelector () ”Với phương thức classList.add (). Cả hai phương thức được đề cập đều lấy các phần tử theo id của chúng trước, sau đó sử dụng phương thức classList.add (), tên lớp mới được gán cho phần tử có thể được sử dụng cho mục đích tạo kiểu. Bài đăng này đã mô tả quy trình liên quan đến việc thêm một lớp đang hoạt động trong JavaScript.