Ẩn/Hiện element HTML bằng JavaScript

Dùng property element.style.display:

'none' — Ẩn (không chiếm layout).
'block', 'inline', 'flex', 'grid', 'inline-block' — Hiện (tuỳ layout).

Ẩn element

<p id="hideText">This text can be hidden.</p>
<button onclick="document.getElementById('hideText').style.display='none'">Hide Me</button>

Hiện element

<p id="showText" style="display:none">This text was hidden.</p>
<button onclick="document.getElementById('showText').style.display='block'">Show Me</button>

Best Practice: Toggle Class CSS

Khuyên dùng: Tách logic (JS) và presentation (CSS).

CSS

.hidden { display: none !important; }
.visible { display: block; }

JS

<script>
  const el = document.getElementById('myElement');
  
  // Ẩn
  el.classList.add('hidden');
  
  // Hiện
  el.classList.remove('hidden');
  
  // Toggle
  el.classList.toggle('hidden');
  
  // Kiểm tra
  if (el.classList.contains('hidden')) { ... }
</script>

Visibility vs Display

Property	`display: none`	`visibility: hidden`
Layout space	Mất (collapse)	Giữ nguyên (occupy space)
Con elements	Ẩn theo	Có thể hiện riêng `visibility: visible`
Events	Không nhận	Không nhận
Transition	Không animate được	Có thể animate opacity

Accessibility (a11y)

display: none + aria-hidden="true" — screen reader bỏ qua.
Để ẩn thị giác nhưng giữ cho screen reader: .visually-hidden pattern (position absolute, clip-path).

Modern: Hidden Attribute

<div hidden>Nội dung ẩn</div>
// JS
el.hidden = true;  // Ẩn
el.hidden = false; // Hiện
// Tương đương display: none nhưng semantic hơn