DOMTokenList: phương thức toggle()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức toggle() của giao diện DOMTokenList
xóa một token hiện có khỏi danh sách và trả về false.
Nếu token không tồn tại, nó sẽ được thêm vào và hàm trả về true.
Cú pháp
toggle(token)
toggle(token, force)
Tham số
token-
Một chuỗi biểu thị token mà bạn muốn chuyển trạng thái.
forceOptional-
Nếu được bao gồm, sẽ biến thao tác toggle thành thao tác một chiều. Nếu đặt là
false, thìtokensẽ chỉ bị xóa, nhưng không được thêm. Nếu đặt làtrue, thìtokensẽ chỉ được thêm, nhưng không bị xóa.
Giá trị trả về
Một giá trị boolean, true hoặc false, cho biết token có nằm trong danh sách sau khi gọi hay không.
Ví dụ
Chuyển trạng thái một lớp khi nhấp
Trong ví dụ sau, chúng ta lấy danh sách các lớp được đặt trên một
phần tử <span> dưới dạng DOMTokenList bằng
Element.classList. Sau đó chúng ta thay thế một token trong danh sách, rồi ghi
danh sách vào Node.textContent của thẻ <span>.
Trước hết là HTML:
<span class="a b">classList is 'a b'</span>
Bây giờ là JavaScript:
const span = document.querySelector("span");
const classes = span.classList;
span.addEventListener("click", () => {
const result = classes.toggle("c");
span.textContent = `'c' ${
result ? "added" : "removed"
}; classList is now "${classes}".`;
});
Kết quả sẽ như sau và sẽ thay đổi mỗi khi bạn nhấp vào văn bản:
Thiết lập tham số force
Tham số thứ hai có thể được dùng để xác định lớp có được bao gồm hay không. Ví dụ này sẽ chỉ bao gồm lớp 'c' nếu cửa sổ trình duyệt rộng hơn 1000 pixel:
span.classList.toggle("c", window.innerWidth > 1000);
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| DOM # ref-for-dom-domtokenlist-toggle① |