Cách Ẩn & Hiện Phần Tử DOM Với Plain JavaScript

Học cách ẩn và hiện phần tử DOM với plain, vanilla JavaScript.

JavaScript có property tên style, dùng để set CSS property trên element, style như CSS. Thử ngay!

Cách ẩn phần tử DOM với 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 gốc là inline hoặc inline-block, thay giá trị block trên bằng một trong hai giá trị đó.

Ví dụ thực tế

Trong ví dụ trên, element chỉ placeholder chung. Để dùng style property thực tế, trước tiên chọn phần tử DOM muốn style.

Giả sử bạn có button muốn xóa khỏi DOM, tên cta-button. Làm như sau:

const ctaButton = document.querySelector(".cta-button") ctaButton.style.display = "none"