NỘI DUNG BÀI VIẾT
Đô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.
>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình
Đị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