स्टाइल डिस्प्ले प्रक्रिया

विन्यास और उपयोग

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
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट