स्टाइल डिस्प्ले प्रक्रिया
- पिछला पृष्ठ direction
- अगला पृष्ठ emptyCells
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जैक्ट
विन्यास और उपयोग
display
एट्रिब्यूट को सेट करना या एलीमेंट के प्रदर्शन प्रकार को वापस करना।
एचटीएमएल में अधिकांश एलीमेंट 'फ्लॉटिंग' या 'ब्लॉक' एलीमेंट हैं: फ्लॉटिंग एलीमेंट के बाईं और दायाँ ओर फ्लॉटिंग सामग्री है। ब्लॉक एलीमेंट पूरा पंक्ति भरता है, उसके बाईं या दायाँ ओर कोई भी सामग्री दिखाई नहीं देती।
display
गुण एक लेखक को एलीमेंट को दिखाने या छुपाने की अनुमति देता है। यह visibility गुण के समान है। लेकिन यदि यह display:none
इसके द्वारा पूरे एलीमेंट को छुपाया जाएगा, और visibility:hidden
इसका मतलब है कि एलीमेंट की सामग्री अदृश्य होगी, लेकिन एलीमेंट अपने मूल स्थान और आकार को बनाए रखेगा।
सूचना:यदि एलीमेंट ब्लॉक एलीमेंट है, तो इसे float गुण के द्वारा भी दिखाने के तरीके से बदल सकते हैं।
अन्य संदर्भ:
CSS शिक्षण:CSS Display और visibility
CSS संदर्भ पुस्तक:display गुण
उदाहरण
उदाहरण 1
अद्वैत वस्तु <div> एलीमेंट को सेट करना:
document.getElementById("myDIV").style.display = "none";
उदाहरण 2
display और visibility गुणों के अंतर:
function demoDisplay() { document.getElementById("myP1").style.display = "none"; } function demoVisibility() { document.getElementById("myP2").style.visibility = "hidden"; }
उदाहरण 3
एलीमेंट को छुपाने और दिखाने के बीच परिवर्तन:
function myFunction() { var x = document.getElementById('myDIV'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } }
उदाहरण 4
"inline"、"block" और "none" के अंतर: function myFunction(x) { var whichSelected = x.selectedIndex; var sel = x.options[whichSelected].text; var elem = document.getElementById("mySpan"); elem.style.display = sel; }
उदाहरण 5
पी इलाके के प्रदर्शन तरीके को वापस करें:
alert(document.getElementById("myP").style.display);
व्याकरण
display गुण वापस करें:
.style.display.style.display
display गुण सेट करें:
.style.displayऑब्जेक्ट .style.display =
मूल्य
गुण मूल्य | मूल्य |
---|---|
वर्णन | block |
इलाका ब्लॉक इलाके के रूप में प्रस्तुत होता है。 | इलाका ब्लॉक या इनलाइन इलाके के रूप में प्रस्तुत होता है। परिप्रेक्ष्य पर निर्भर करता है。 |
compact | flex |
inline | इलाका इनलाइन इलाके के रूप में प्रस्तुत होता है। मूलभूत मूल्य |
inline-block | इलाका इनलाइन बॉक्स में ब्लॉक बॉक्स के रूप में प्रस्तुत होता है。 |
inline-flex | इलाका इनलाइन स्तर अनुताप (inline-flex) के रूप में प्रस्तुत होता है। CSS3 का नया गुण |
inline-table | इलाका इनलाइन तालिका (जैसे <table>) के रूप में प्रस्तुत होता है। तालिका के आगे और पीछे बदलने का निर्देश नहीं देता है。 |
list-item | इलाका सूची के रूप में प्रस्तुत होता है。 |
marker |
इस मूल्य से टैग के पहले या बाद में की गई सामग्री को चिह्न (marker) बनाया जाता है :before और :after शैली इलाके के साथ इस्तेमाल किया जाता है। अन्यथा इस मूल्य 'inline' के समान है। |
none | इलाका दिखाया नहीं जाता है。 |
run-in | इलाका ब्लॉक या इनलाइन इलाके के रूप में प्रस्तुत होता है। परिप्रेक्ष्य पर निर्भर करता है。 |
table | इलाका ब्लॉक तालिका (block table) के रूप में प्रस्तुत होता है (जैसे <table>),तालिका के आगे और पीछे बदलने का निर्देश देता है。 |
table-caption | इलाका तालिका शीर्ष (जैसे <caption>) के रूप में प्रस्तुत होता है。 |
table-cell | इलाका तालिका सेल (जैसे <td> और <th>) के रूप में प्रस्तुत होता है。 |
table-column | इलाका एक सेल स्तम्भ के रूप में प्रस्तुत होता है (जैसे <col>)。 |
table-column-group | इलाका एक स्तम्भ या कई स्तम्भों के समूह के रूप में प्रस्तुत होता है (जैसे <colgroup>)。 |
table-footer-group | इलाका तालिका पाद पंक्ति के रूप में प्रस्तुत होता है (जैसे <tfoot>)。 |
table-header-group | इलाका तालिका शीर्ष पंक्ति के रूप में प्रस्तुत होता है (जैसे <thead>)。 |
table-row | इलाका तालिका पंक्ति के रूप में प्रस्तुत होता है (जैसे <tr>)。 |
table-row-group | इलाका एक पंक्ति या कई पंक्तियों के समूह के रूप में प्रस्तुत होता है (जैसे <tbody>)。 |
initial | इस गुण को उसके मूल मूल्य पर सेट करें। देखें initial। |
inherit | इस गुण को उसके पिता इलाके से विरासत करें। देखें inherit। |
तकनीकी विवरण
मूलभूत मूल्य: | inline |
---|---|
परिणाम: | शब्द, इलाके के प्रदर्शन तरीके को प्रतिनिधित्व करता है。 |
CSS संस्करण: | CSS1 |
ब्राउज़र समर्थन
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट |
- पिछला पृष्ठ direction
- अगला पृष्ठ emptyCells
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जैक्ट