Cách ẩn hoặc hiện thẻ div trong JavaScript

Đôi khi, bạn có thể muốn hiển thị hoặc ẩn thẻ div trong ứng dụng web của mình. Trong bài viết này, mình sẽ chỉ cho bạn cách ẩn hoặc hiện thẻ div bằng JavaScript.

Định nghĩa thẻ div là gì? 

div – viết tắt của division – là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ trong HTML đều có mục đích khác nhau.

Ví dụ như thẻ <p> (viết tắt của paragraph) được dùng để chỉ định một đoạn văn bản nhất định, hay thẻ <br> dùng để ngắt đoạn văn bản trong HTML. Thẻ <div> là thẻ đánh dấu một khối (block) gồm nhiều thẻ khác trong khối. Như tên gọi, thẻ <div> giúp các tài liệu HTML được chia thành các phần (khối) riêng biệt. 

Ẩn hoặc hiện thẻ div với thuộc tính style.display

Để ẩn hoặc hiện thẻ div bằng JavaScript, bạn có thể thao tác thuộc tính style.display để thay đổi thuộc tính CSS display.

Mình đặt postion cho nó thành 'block', 'inline'hoặc 'inline-block' để hiển thị chúng.

'block'làm cho thành một khối, 'inline'làm cho cùng hàng. 'inline-block'giống như khối ngoại trừ việc nó không thêm dấu ngắt dòng sau phần tử.

Ngược lại, tớ ẩn nó nếu tớ đặt nó thành 'none'.

Ví dụ, bạn có thể viết HTML sau:

<button id='show'>
  show
</button>
<button id='hide'>
  hide
</button>
<div>
  hello
</div>Code language: HTML, XML (xml)

Sau đó, bạn có thể viết mã JavaScript sau để chuyển đổi thuộc tính display của div:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const div = document.querySelector('div')
showBtn.addEventListener('click', () => {
  div.style.display = 'block'
})
hideBtn.addEventListener('click', () => {
  div.style.display = 'none'
})Code language: JavaScript (javascript)

Mình nhận được các nút hiển thị và ẩn thẻ div với document.querySelector.

Sau đó, tớ gọi addEventListener với 'click'đối số để thêm trình lắng nghe sự kiện của button.

Khi tớ nhấp vào showBtn, tớ đặt div.style.display thành 'block'.

Và khi tớ nhấp vào hideBtn, tớ đặt div.style.display thành 'none'.

Thao tác với thuộc tính style.visibility để ẩn hoặc hiện thẻ div

Tớ cũng có thể thay đổi giá trị của thuộc tính style.visibility để ẩn hoặc hiện thẻ div.

Sự khác biệt giữa display và visibility là display thêm hoặc xóa thẻ div khỏi màn hình khi tớ thay đổi giá trị của nó.

visibility giữ không gian của phần tử bất kể nó được hiển thị hay bị ẩn.

Ví dụ, bạn có thể viết:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const div = document.querySelector('div')
showBtn.addEventListener('click', () => {
  div.style.visibility = 'visible'
})
hideBtn.addEventListener('click', () => {
  div.style.visibility = 'hidden'
})Code language: JavaScript (javascript)

và giữ nguyên HTML như ví dụ trước.

'visible'làm cho div hiển thị và 'hidden'ẩn nó.

Hiển thị hoặc ẩn tập hợp các thẻ div

Mình có thể hiển thị hoặc ẩn tập hợp các thẻ div một cách dễ dàng bằng JavaScript.

Ví dụ: nếu bạn có HTML sau:

<button id='show'>
  show
</button>
<button id='hide'>
  hide
</button>
<div>
  hello
</div>
<div>
  world
</div>Code language: HTML, XML (xml)

Sau đó, bạn có thể lặp qua từng thẻ div để hiển thị và ẩn chúng.

Để làm điều này, tớ viết JavaScript sau:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const divs = document.querySelectorAll('div')
showBtn.addEventListener('click', () => {
  for (const div of divs) {
    div.style.display = 'block'
  }
})
hideBtn.addEventListener('click', () => {
  for (const div of divs) {
    div.style.display = 'none'
  }
})Code language: JavaScript (javascript)

Mình lấy các button theo cùng một cách như các ví dụ trước.

Sau đó, tớ nhận được cả hai div với querySelectorAll.

Trong trình lắng nghe sự kiện, tớ lặp qua các div và đặt thuộc tính style.display cho mỗi div.

Tớ có thể làm điều tương tự với visibility tài sản.

Kết luận

Bạn có thể ẩn hoặc hiện thẻ div một hoặc nhiều lần bằng JavaScript một cách dễ dàng.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG