परिचय
HTML DOM Style display प्रॉपर्टी का उपयोग किसी एलिमेंट के डिस्प्ले प्रकार को सेट करने या वापस करने के लिए किया जाता है। एलिमेंट्स ज्यादातर ब्लॉक या इनलाइन होते हैं। आप display: none का उपयोग करके एलिमेंट को छिपा भी सकते हैं।
सिंटैक्स
object.style.display = value
मान और विवरण
| मान | विवरण |
|---|---|
inline |
एलिमेंट को इनलाइन एलिमेंट के रूप में प्रदर्शित करता है यानी चौड़ाई और ऊंचाई प्रॉपर्टीज का कोई प्रभाव नहीं होगा। |
block |
ब्लॉक एलिमेंट नई लाइन पर प्रदर्शित होता है और पूरी चौड़ाई लेता है। |
contents |
केवल चाइल्ड एलिमेंट्स प्रदर्शित करता है और पैरेंट एलिमेंट को गायब कर देता है जिससे चाइल्ड DOM के डायरेक्ट चाइल्ड बन जाते हैं। |
flex |
एलिमेंट को ब्लॉक-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है। |
grid |
एलिमेंट को ब्लॉक-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है। |
inline-block |
inline के समान लेकिन अब आप चौड़ाई और ऊंचाई मान लागू कर सकते हैं। |
inline-flex |
एलिमेंट को इनलाइन-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है। |
inline-grid |
एलिमेंट को इनलाइन-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है। |
inline-table |
एलिमेंट को इनलाइन-लेवल टेबल के रूप में प्रदर्शित करता है। |
list-item |
एलिमेंट को <li> एलिमेंट की तरह व्यवहार करने देता है। |
run-in |
कॉन्टेक्स्ट के आधार पर एलिमेंट को ब्लॉक या इनलाइन के रूप में प्रदर्शित करता है। |
table |
एलिमेंट को <table> एलिमेंट की तरह व्यवहार करने देता है। |
table-caption |
एलिमेंट को <caption> एलिमेंट की तरह व्यवहार करने देता है। |
table-column-group |
एलिमेंट को <colgroup> एलिमेंट की तरह व्यवहार करने देता है। |
table-header-group |
एलिमेंट को <thead> एलिमेंट की तरह व्यवहार करने देता है। |
table-footer-group |
एलिमेंट को <tfoot> एलिमेंट की तरह व्यवहार करने देता है। |
table-row-group |
एलिमेंट को <tbody> एलिमेंट की तरह व्यवहार करने देता है। |
table-cell |
एलिमेंट को <td> एलिमेंट की तरह व्यवहार करने देता है। |
table-column |
एलिमेंट को <col> एलिमेंट की तरह व्यवहार करने देता है। |
table-row |
एलिमेंट को <tr> एलिमेंट की तरह व्यवहार करने देता है। |
none |
एलिमेंट पूरी तरह से हटा दिया जाता है। |
initial |
इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करता है। |
inherit |
पैरेंट एलिमेंट से प्रॉपर्टी मान विरासत में लेता है। |
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
padding: 10px;
background-color: lightblue;
display: flex;
flex-direction: row;
}
#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 = "div और इसके अंदर के दोनों Span एलिमेंट्स का डिस्प्ले अब block में बदल दिया गया है";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>ऊपर के div और इसके अंदर के एलिमेंट्स का डिस्प्ले प्रॉपर्टी बदलने के लिए नीचे दिए गए बटन पर क्लिक करें</p>
<button onclick="changeDisplay()">डिस्प्ले बदलें</button>
<p id="Sample"></p>
</body>
</html>
आउटपुट
प्रारंभिक स्थिति (flex डिस्प्ले):
"डिस्प्ले बदलें" बटन पर क्लिक करने के बाद (block डिस्प्ले):
