Thuộc tính hiển thị Style

Định nghĩa và cách sử dụng

display Cài đặt hoặc trả về loại hiển thị của yếu tố.

Các yếu tố trong HTML chủ yếu là yếu tố “ngang” hoặc “chữ”: yếu tố ngang có nội dung trôi nổi ở cả bên trái và bên phải. Yếu tố chữ chiếm toàn dòng, bên trái hoặc bên phải không thể hiển thị bất kỳ nội dung nào.

display thuộc tính cũng cho phép tác giả hiển thị hoặc ẩn yếu tố. Nó tương tự như thuộc tính visibility. Nhưng nếu thiết lập display:nonesẽ ẩn toàn bộ yếu tố, trong khi visibility:hidden nghĩa là nội dung của yếu tố sẽ không thể nhìn thấy, nhưng yếu tố sẽ giữ nguyên vị trí và kích thước ban đầu của nó.

Lưu ý:Nếu yếu tố là yếu tố khối, bạn cũng có thể thay đổi loại hiển thị của nó thông qua thuộc tính float.

Xin xem thêm:

Hướng dẫn CSS:CSS Display và visibility

Tài liệu tham khảo CSS:Thuộc tính display

Mô hình

Mẫu 1

Thiết lập không hiển thị yếu tố <div>:

document.getElementById("myDIV").style.display = "none";

Thử nghiệm trực tiếp

Mẫu 2

Sự khác biệt giữa thuộc tính display và thuộc tính visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Thử nghiệm trực tiếp

Mẫu 3

Chuyển đổi giữa việc ẩn và hiển thị yếu tố:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Thử nghiệm trực tiếp

Mẫu 4

Sự khác biệt giữa "inline", "block" và "none":
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Thử nghiệm trực tiếp

Mẫu 5

Trả về loại hiển thị của phần tử <p>:

alert(document.getElementById("myP").style.display);

Thử nghiệm trực tiếp

Cú pháp

Trả về thuộc tính display:

object.style.display

Đặt thuộc tính display:

object.style.display = value

Giá trị thuộc tính

Giá trị Mô tả
block Phần tử được vẽ như phần tử khối.
compact Phần tử hiển thị như phần tử khối hoặc phần tử nội tuyến. Tuỳ thuộc vào ngữ cảnh.
flex Phần tử hiển thị như khung khối弹性. Tính năng mới trong CSS3.
inline Phần tử hiển thị như phần tử nội tuyến. Mặc định.
inline-block Phần tử hiển thị như khung nội tuyến chứa khung khối (block box).
inline-flex Phần tử hiển thị như khung nội tuyến. Tính năng mới trong CSS3.
inline-table Phần tử hiển thị như bảng nội tuyến (ví dụ <table>), không có ký tự mới dòng trước và sau bảng.
list-item Phần tử hiển thị như danh sách.
marker

Giá trị này sẽ đặt nội dung trước hoặc sau khung là dấu hiệu (marker)

Sử dụng cùng với pseudo-element :before và :after. Nếu không, giá trị này sẽ giống như "inline".
none Phần tử không hiển thị.
run-in Phần tử hiển thị như phần tử khối hoặc phần tử nội tuyến. Tuỳ thuộc vào ngữ cảnh.
table Phần tử hiển thị như bảng khối (block table) (ví dụ <table>), có ký tự mới dòng trước và sau bảng.
table-caption Phần tử hiển thị như tiêu đề bảng (ví dụ <caption>).
table-cell Phần tử hiển thị như cell bảng (ví dụ <td> và <th>).
table-column Phần tử hiển thị như cột cell (ví dụ <col>).
table-column-group Phần tử hiển thị như nhóm cột hoặc nhiều cột (ví dụ <colgroup>).
table-footer-group Phần tử hiển thị như dòng chân bảng (ví dụ <tfoot>).
table-header-group Phần tử hiển thị như dòng tiêu đề bảng (ví dụ <thead>).
table-row Phần tử hiển thị như dòng bảng (ví dụ <tr>).
table-row-group Phần tử hiển thị như một nhóm dòng hoặc nhiều dòng (ví dụ <tbody>).
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: inline
Giá trị trả về: Chuỗi, biểu thị loại hiển thị của phần tử.
Phiên bản CSS: CSS1

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ