Thuộc tính hiển thị HTML DOM Style được sử dụng để thiết lập hoặc trả về kiểu hiển thị của một phần tử. Các phần tử chủ yếu là khối hoặc nội dòng. Bạn cũng có thể ẩn phần tử bằng cách sử dụng display:none.
Sau đây là cú pháp cho -
Đặt thuộc tính hiển thị -
object.style.display = value
Giá trị tài sản trên được giải thích như sau -
| Giá trị | Mô tả | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| nội tuyến | Hiển thị lại phần tử dưới dạng phần tử nội tuyến, tức là các thuộc tính chiều rộng và chiều cao sẽ không có hiệu lực. | |||||||||||||||||||||||
| khối | Phần tử khối được hiển thị trên dòng mới và chiếm toàn bộ chiều rộng. | |||||||||||||||||||||||
| nội dung | Thao tác này chỉ hiển thị các phần tử con và làm cho phần tử mẹ biến mất khiến phần tử con trực tiếp là phần tử con của DOM. | |||||||||||||||||||||||
| flex | Hiển thị phần tử dưới dạng vùng chứa linh hoạt cấp khối | |||||||||||||||||||||||
| lưới | Hiển thị phần tử dưới dạng vùng chứa lưới cấp khối | |||||||||||||||||||||||
| inline-block | Tương tự như trong dòng nhưng bây giờ bạn có thể áp dụng các giá trị chiều rộng và chiều cao. | |||||||||||||||||||||||
| inline-flex | Phần tử hiển thị dưới dạng vùng chứa linh hoạt cấp nội tuyến | |||||||||||||||||||||||
| inline-grid | Hiển thị phần tử dưới dạng vùng chứa lưới cấp nội tuyến | |||||||||||||||||||||||
| inline-table | Theelement được hiển thị dưới dạng bảng nội tuyến | |||||||||||||||||||||||
| list-item | Hãy để phần tử hoạt động giống như một phần tử | |||||||||||||||||||||||
| run-in | Phần tử hiển thị dưới dạng khối hoặc nội dòng, tùy thuộc vào ngữ cảnh | |||||||||||||||||||||||
| bảng | Để phần tử hoạt động giống như một phần tử
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính hiển thị - Ví dụ<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding:10px;
background-color:lightblue;
display:flex;
flex-direction:right;
}
#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="The display is now changed to block for both the div and its inner Span elements";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>Change the display property of the above div and its inner elements by clicking the below button</p>
<button onclick="changeDisplay()">Change Display</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi hiển thị ”-
|
