Phương thức HTML DOMTokenList toggle()

Định nghĩa và cách sử dụng

Phương thức toggle() loại bỏ dấu hiệu được cung cấp từ danh sách và trả về false. Nếu dấu hiệu không tồn tại, nó sẽ thêm và trả về true.

Mô hình

Ví dụ 1

Chuyển đổi trạng thái mở/closed của "myStyle":

const list = element.classList;
list.toggle("mywStyle");

Thử ngay

Ví dụ 2

Thêm lớp "myStyle" vào phần tử:

const list = element.classList;
list.add("myStyle");

Thử ngay

Ví dụ 3

Xóa bỏ lớp "myStyle" từ phần tử:

const list = element.classList;
list.remove("myStyle");

Thử ngay

Ví dụ 4

Thêm nhiều lớp vào phần tử:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Thử ngay

Ví dụ 5

Xóa nhiều lớp từ phần tử:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Thử ngay

Ví dụ 6

Lấy số lượng lớp của phần tử:

let numb = element.classList.length;

Thử ngay

Ví dụ 7

Chuyển đổi lớp để tạo nút thả xuống:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Thử ngay

Cú pháp

domtokenlist.toggle(thẻ)

Tham số

Tham số Mô tả
thẻ Bắt buộc. Tên thẻ cần chuyển đổi.

Giá trị trả về

Không có.

Hỗ trợ trình duyệt

domtokenlist.toggle() là tính năng DOM Level 4 (2015).

Nó nhận được hỗ trợ từ tất cả các trình duyệt:

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Internet Explorer 11 (hoặc phiên bản trước) không hỗ trợ domtokenlist.toggle().

Trang liên quan

Thuộc tính length

Phương thức item()

Phương thức add()

Phương thức remove()

Phương thức replace()

Phương thức forEach()

Phương thức entries()

Phương thức keys()

Phương thức values()

Đối tượng DOMTokenList