Thuộc tính mở Chi tiết DOM HTML được liên kết với thuộc tính mở HTML
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính mở chi tiết -
detailsObject.open = true|false
Tại đây, true =Thông tin chi tiết sẽ được hiển thị và false =Thông tin chi tiết sẽ bị ẩn. Các chi tiết được ẩn theo mặc định.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính mở Chi tiết -
<!DOCTYPE html>
<html>
<body>
<h2>Details open() property</h2>
<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p>
</details>
<p>Click the below button to set the details to be visible to the user</p>
<button onclick="setDetail()">Visible</button>
<script>
function setDetail() {
document.getElementById("Details1").open = true;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút "Hiển thị" -
Trong ví dụ trên -
Chúng tôi đã tạo một phần tử
Sau đó, chúng tôi đã tạo nút “Hiển thị” sẽ thực thi hàm setDetail () khi người dùng nhấp vào -
Hàm setDetail () nhận phần tử <details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
</p>
</details>
<button onclick="setDetail()">Visible</button>
function setDetail() {
document.getElementById("Details1").open = true;
}