Thuộc tính hiển thị kiểu
Thí dụ
Đặt phần tử <div> không được hiển thị:
document.getElementById("myDIV").style.display = "none";
Định nghĩa và Cách sử dụng
Thuộc tính hiển thị đặt hoặc trả về kiểu hiển thị của phần tử.
Các phần tử trong HTML hầu hết là các phần tử "nội tuyến" hoặc "khối": Một phần tử nội tuyến có nội dung nổi ở bên trái và bên phải của nó. Một phần tử khối lấp đầy toàn bộ dòng và không có gì có thể được hiển thị ở bên trái hoặc bên phải của nó.
Thuộc tính hiển thị cũng cho phép tác giả hiển thị hoặc ẩn một phần tử. Nó tương tự như thuộc tính khả năng hiển thị . Tuy nhiên, nếu bạn đặt display:none, nó sẽ ẩn toàn bộ phần tử, đồng thời visibility:hiddencó nghĩa là nội dung của phần tử sẽ ẩn nhưng phần tử vẫn ở vị trí và kích thước ban đầu của nó.
Mẹo: Nếu một phần tử là một phần tử khối, kiểu hiển thị của nó cũng có thể được thay đổi bằng thuộc tính float.
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại thuộc tính hiển thị:
object.style.display
Đặt thuộc tính hiển thị:
object.style.display = value
Giá trị tài sản
| Value | Description |
|---|---|
| block | Element is rendered as a block-level element |
| compact | Element is rendered as a block-level or inline element. Depends on context |
| flex | Element is rendered as a block-level flex box. New in CSS3 |
| inline | Element is rendered as an inline element. This is default |
| inline-block | Element is rendered as a block box inside an inline box |
| inline-flex | Element is rendered as a inline-level flex box. New in CSS3 |
| inline-table | Element is rendered as an inline table (like <table>), with no line break before or after the table |
| list-item | Element is rendered as a list |
| marker | This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") |
| none | Element will not be displayed |
| run-in | Element is rendered as block-level or inline element. Depends on context |
| table | Element is rendered as a block table (like <table>), with a line break before and after the table |
| table-caption | Element is rendered as a table caption (like <caption>) |
| table-cell | Element is rendered as a table cell (like <td> and <th>) |
| table-column | Element is rendered as a column of cells (like <col>) |
| table-column-group | Element is rendered as a group of one or more columns (like <colgroup>) |
| table-footer-group | Element is rendered as a table footer row (like <tfoot>) |
| table-header-group | Element is rendered as a table header row (like <thead>) |
| table-row | Element is rendered as a table row (like <tr>) |
| table-row-group | Element is rendered as a group of one or more rows (like <tbody>) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | nội tuyến |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho kiểu hiển thị của một phần tử |
| Phiên bản CSS | CSS1 |
Các ví dụ khác
Thí dụ
Sự khác biệt giữa thuộc tính hiển thị và thuộc tính hiển thị:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Thí dụ
Chuyển đổi giữa ẩn và hiển thị một phần tử:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Thí dụ
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í dụ
Trả về kiểu hiển thị của phần tử <p>:
alert(document.getElementById("myP").style.display);
Các trang liên quan
Hướng dẫn CSS: Hiển thị và hiển thị CSS
Tham chiếu CSS: thuộc tính hiển thị
❮ Đối tượng phong cách