Thuộc tính display trong HTML DOM Style

Giới thiệu

Thuộc tính display trong HTML DOM Style dùng để thiết lập hoặc lấy kiểu hiển thị (display type) của một phần tử. Các phần tử thường là block hoặc inline. Bạn cũng có thể ẩn phần tử bằng display: none.

Cú pháp

Thiết lập display:

object.style.display = value

Các giá trị phổ biến

Giá trị	Mô tả
inline	Hiển thị như phần tử nội tuyến (width/height không có tác dụng).
block	Hiển thị như phần tử khối, xuống dòng mới, chiếm toàn bộ chiều rộng.
contents	Chỉ hiển thị các phần tử con, phần tử cha biến mất (con trở thành con trực tiếp của DOM).
flex	Hiển thị như flex container cấp khối.
grid	Hiển thị như grid container cấp khối.
inline-block	Giống inline nhưng cho phép thiết lập width/height.
inline-flex	Hiển thị như flex container cấp nội tuyến.
inline-grid	Hiển thị như grid container cấp nội tuyến.
inline-table	Hiển thị như bảng cấp nội tuyến.
list-item	Hành xử như phần tử <li>.
run-in	Hiển thị như block hoặc inline tùy ngữ cảnh.
table	Hành xử như <table>.
table-caption	Hành xử như <caption>.
table-column-group	Hành xử như <colgroup>.
table-header-group	Hành xử như <thead>.
table-footer-group	Hành xử như <tfoot>.
table-row-group	Hành xử như <tbody>.
table-cell	Hành xử như <td>.
table-column	Hành xử như <col>.
table-row	Hành xử như <tr>.
none	Phần tử bị loại bỏ hoàn toàn khỏi layout.
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ thay đổi display từ flex sang block cho div cha và span con.

<!DOCTYPE html> <html> <head> <style> 
  #DIV1{ 
    padding:10px; 
    background-color:lightblue; 
    display:flex; 
    flex-direction:row; 
  } 
  #flexSpan{ 
    width:70px; 
    background-color:red; 
    margin:20px; 
    padding:10px; 
  } 
</style> <script> 
  function changeDisplay() { 
    document.getElementById("DIV1").style.display = "block"; 
    document.getElementById("flexSpan").style.display = "block"; 
    document.getElementById("Sample").innerHTML = "Display đã đổi thành block cho cả div và các span bên trong"; 
  } 
</script> </head> <body> 
  <div id="DIV1"> 
    <span id="flexSpan">WORLD1</span> 
    <span id="flexSpan">WORLD2</span> 
  </div> 
  <p>Nhấn nút để thay đổi display của div và các phần tử con</p> 
  <button onclick="changeDisplay()">Thay đổi Display</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

Thuộc tính display trong HTML DOM Style

Sau khi nhấn nút Thay đổi Display:

Thuộc tính display trong HTML DOM Style