Thuộc tính hiển thị kiểu
Ví dụ
Đặt phần tử <div> không được hiển thị:
document.getElementById("myDIV").style.display = "none";
Hãy tự mình thử »Sự miêu tả
Thuộc tính display đặ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": Phần tử nội tuyến có nội dung nổi ở bên trái và bên phải. Một phần tử khối lấp đầy toàn bộ dòng và không thể hiển thị gì ở bên trái hoặc bên phải của nó.
Thuộc tính display 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ử, trong khi visibility:hidden
có 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.
Mẹo: Nếu một phần tử là 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ả về 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 |
grid | Element is rendered as a block-level grid. New in CSS3 |
inherit | Inherits this property from its parent element. Read about inherit |
initial | Sets this property to its default value. Read about initial |
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-grid | Element is rendered as a inline-level grid. 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>) |
Chi tiết kỹ thuật
Giá trị mặc định: | nội tuyến |
---|---|
Giá trị trả về: | Một Chuỗi, biểu thị kiểu hiển thị của một phần tử |
Phiên bản CSS | CSS1 |
Thêm ví dụ
Ví 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";
}
Hãy tự mình thử »Ví 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';
}
}
Hãy tự mình thử »Ví dụ
Sự khác biệt giữa "nội tuyến", "chặn" và "không":
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
Hãy tự mình thử »Ví dụ
Trả về kiểu hiển thị của phần tử <p>:
alert(document.getElementById("myP").style.display);
Hãy tự mình thử »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ị