एचटीएमएल डोम विवरण खुली संपत्ति

<घंटा/>

एचटीएमएल डोम विवरण खुली संपत्ति एचटीएमएल <विवरण> खुली संपत्ति से जुड़ी है। यह एक बूलियन विशेषता है और यह निर्दिष्ट करने के लिए उपयोग किया जाता है कि विवरण उपयोगकर्ता को दिखाई देना चाहिए या नहीं। जब सही पर सेट किया जाता है तो विवरण उपयोगकर्ता को दिखाई देता है। हालांकि, इसे गलत पर सेट करते समय उपयोगकर्ता से विवरण छुपाएं।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

विवरण खुली संपत्ति सेट करना -

detailsObject.open = true|false

यहां, सत्य =विवरण दिखाया जाएगा और झूठा =विवरण छिपाया जाएगा। विवरण डिफ़ॉल्ट रूप से छिपे होते हैं।

उदाहरण

आइए विवरण खुली संपत्ति के लिए एक उदाहरण देखें -

<!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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम विवरण खुली संपत्ति

"दृश्यमान" बटन पर क्लिक करने पर -

एचटीएमएल डोम विवरण खुली संपत्ति

उपरोक्त उदाहरण में -

हमने "Details1" आईडी के साथ एक

<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>

setDetail() फ़ंक्शन getElementById() का उपयोग करके <विवरण> तत्व प्राप्त करता है और इसके खुले विशेषता मान को सत्य पर सेट करता है। यह उपयोगकर्ता को <विवरण> के अंदर की जानकारी प्रदर्शित करता है -

function setDetail() {
   document.getElementById("Details1").open = true;
}