Thuộc tính display kiểm soát kiểu hộp (box type) của phần tử: block, inline, flex, grid, none, v.v. Dùng none để ẩn hoàn toàn (không chiếm không gian).
Ví dụ minh họa
Nhấn nút để ẩn hộp xanh lá (display: none):
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
width: 250px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button onclick="display()">Đặt display = none</button>
<div id="myID">
<h1>Tiêu đề cấp 1 Demo</h1>
Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
</div>
<script>
function display() {
document.getElementById("myID").style.display = "none";
}
</script>
</body>
</html>
Các giá trị display phổ biến
| Giá trị | Mô tả |
|---|---|
block | Khối, chiếm toàn bộ chiều ngang, xuống dòng mới |
inline | Đúng dòng, không đặt width/height được |
inline-block | Đúng dòng nhưng đặt width/height được |
flex | Flex container |
grid | Grid container |
none | Ẩn hoàn toàn, không chiếm diện tích |
contents | Phần tử biến mất, chỉ con cái tham gia layout |