Tìm hiểu cách ẩn và hiển thị các phần tử DOM bằng JavaScript đơn giản, đơn giản.
JavaScript có một thuộc tính kiểu, được gọi một cách thích hợp là style , có thể được sử dụng để đặt các thuộc tính CSS trên các phần tử và tạo kiểu cho chúng giống như bạn có thể làm với CSS. Hãy thử nó!
Đây là cách bạn ẩn phần tử DOM bằng JavaScript:
element.style.display = "none"Để hiển thị lại phần tử DOM:
element.style.display = "block"
Lưu ý:nếu phần tử DOM của bạn ban đầu được đặt thành inline hoặc inline-block , chỉ cần thay thế khối block giá trị ở trên với một trong các giá trị đó.
Ví dụ thực tế
Trong ví dụ trên, phần tử block chỉ là một trình giữ chỗ chung chung. Để sử dụng style của JavaScript theo nghĩa thực tế, trước tiên bạn cần chọn phần tử DOM mà bạn muốn tạo kiểu.
Giả sử bạn có một nút muốn xóa khỏi DOM, được gọi là cta-button . Bạn sẽ làm như thế này:
const ctaButton = document.querySelector(".cta-button")
ctaButton.style.display = "none"