क्या प्रदर्शन के विपरीत है: कोई नहीं?

197

के विपरीत visibility: hiddenहै visibility: visible। इसी तरह, क्या इसके लिए कोई विपरीत है display: none?

कई लोग भ्रमित हो जाते हैं कि किसी तत्व को कैसे दिखाना है display: none, क्योंकि यह visibilityसंपत्ति का उपयोग करने के रूप में स्पष्ट नहीं है ।

मैं visibility: hiddenइसके बजाय सिर्फ उपयोग कर सकता था display: none, लेकिन यह उतना प्रभाव नहीं देता है, इसलिए मैं इसके साथ नहीं जा रहा हूं।

css

— मोहम्मद अरीब सिद्दीकी
स्रोत

35

सुनिश्चित नहीं हैं कि यह डाउन-वोट और करीबी अनुरोध क्यों हो रहा है। यह ऑन-टॉपिक है (स्टैक ओवरफ्लो पर वर्तमान में 143,368 CSS प्रश्न हैं), यह एक वास्तविक दुनिया का मुद्दा है, और लोगों को भाषा को ठीक से सीखने में मदद करने के लिए यह एक अच्छा सवाल है।

— पॉल डी। वेट

4

@Paul शायद लोगों ने ध्यान नहीं दिया कि यह एक स्व उत्तर था और उसने सोचा कि यह एक कम शोध प्रयास था (क्योंकि सभी शोध प्रयास उत्तर में हैं)

— रिचर्ड टिंगल

11

यदि आपका उत्तर w3schools.com/cssref/pr_class_display.asp से किसी तालिका को कॉपी / पेस्ट करना है, तो प्रश्न पूछने से क्यों परेशान हों ?

— छिपकली

1

@ रीचर्ड टिंगल: आह, अच्छी बात है। @ मोहम्मदअरीबद्दिक़: जाग, मुझे नहीं लगा कि आपके उत्तर को हटाने की आवश्यकता है। बस सभी संभावित displayमूल्यों की बड़ी सूची को हटा देना ठीक होता। (और यह सिर्फ मेरी राय है: हो सकता है कि लोगों को वास्तव में वह सूची पसंद आ रही हो।)

— पॉल डी। वेट

आपको वास्तव में वास्तव में इल्या स्ट्रेलित्सिन के उत्तर को स्वीकार करना चाहिए था। इल्या प्रदर्शन का "संस्करण" देता है: कोई भी ऐसा नहीं है जिसके पास एक विपरीत है, जो आपके प्रश्न को अंतर्निहित व्यावहारिक समस्या को हल करता है, जबकि आपने जो उत्तर स्वीकार किया है, संक्षेप में, बस "नहीं" कहता है। जो सुनिश्चित है कि सही है, लेकिन बहुत कम मददगार है। यह प्रोग्रामर के लिए है, भाषाविदों के लिए नहीं।

— मैथेडिनक्लाउड्स

177

display: noneएक शाब्दिक विपरीत नहीं है जैसे visibility:hiddenकरता है।

visibilityसंपत्ति एक तत्व दिखाई है या नहीं का फैसला किया। इसलिए इसके दो राज्य ( visibleऔर hidden) हैं, जो एक दूसरे के विपरीत हैं।

displayसंपत्ति, तथापि, निर्णय लेता है क्या लेआउट नियम एक तत्व का पालन करेंगे। सीएसएस में खुद को कैसे रखा जाएगा, इसके लिए कई अलग-अलग प्रकार के नियम हैं, इसलिए कई अलग-अलग मूल्य हैं ( blockऔर inline, inline-blockआदि - इन मूल्यों के लिए प्रलेखन यहां देखें )।

display:none पृष्ठ लेआउट से एक तत्व को पूरी तरह से हटा देता है, जैसे कि वह वहां नहीं था।

displayतत्व के कारण अन्य सभी मान पृष्ठ का हिस्सा होते हैं, इसलिए एक मायने में वे सभी विपरीत होते हैं display:none।

लेकिन इसका एक भी मूल्य नहीं है कि इसका सीधा प्रभाव है display:none- जैसे कि कोई भी हेयर स्टाइल नहीं है जो कि "गंजा" के विपरीत है।

— पॉल डी। वेटे
स्रोत

2

मैंने आपको display: initialहटाए गए स्व-उत्तर में उल्लेख किया है - CSS2.1 को लागू करने वाले ब्राउज़रों के लिए यह इसका पर्याय है display: inline। यह displayकिसी दिए गए तत्व के लिए ब्राउज़र डिफ़ॉल्ट पर रीसेट नहीं होता है - यह "प्रारंभिक मूल्य" का मतलब नहीं है।

— BoltClock

26

'गंजे' उदाहरण के लिए मेरा वोट :) बहुत आसान-से-समझने वाला उदाहरण है!

— जेसपर रॉन-जेनसन

1

मैं के माध्यम से पूरे पढ़ने मेरी आत्म करने के लिए सोच रहा हूँ "महान उदाहरण, हां, हां, वे कर रहे हैं सभी के सामने display:noneतो आप पढ़ सकते हैं" कोई एक बाल शैली के विपरीत है कि बस की तरह " गंजा वाह प्लस 1, अच्छी तरह से कर दिया"।

— शेफ_कोड

2

कोई भी हेयर स्टाइल गंजे के विपरीत होता है।

— एडजक्टप्रोफेसर फाल्कन

@ AdjunctProfurerFalcon: अच्छी तरह से। मैं कहूंगा कि नंबर एक पर मुंडा हुआ एक मुललेट की तुलना में गंजे के विपरीत बहुत कम है।

— पॉल डी। वेट

84

इसके विपरीत एक सही display: none(अभी तक) नहीं है।

लेकिन display: unsetबहुत करीब है और ज्यादातर मामलों में काम करता है।

से MDN (मोज़िला डेवलपर नेटवर्क):

अनसेट सीएसएस कीवर्ड प्रारंभिक और विरासत कीवर्ड का संयोजन है। इन दो अन्य सीएसएस-विस्तृत कीवर्ड की तरह, इसे सीएसएस शॉर्टहैंड सहित किसी भी सीएसएस संपत्ति पर लागू किया जा सकता है। यदि यह अपने माता-पिता से विरासत में मिला है या नहीं तो इसके आरंभिक मूल्य पर यह कीवर्ड संपत्ति को उसके उत्तराधिकारी मूल्य पर रीसेट करता है। दूसरे शब्दों में, यह पहले मामले में इनहेरिट कीवर्ड की तरह व्यवहार करता है और दूसरे मामले में शुरुआती कीवर्ड की तरह।

(स्रोत: https://developer.mozilla.org/docs/Web/CSS/unset )

ध्यान दें कि display: revertवर्तमान में विकसित किया जा रहा है। देखें MDN जानकारी के लिए।

— RockPaperLizard
स्रोत

किस बारे में display: initial?

— फ्लिम

31

जब displayजावास्क्रिप्ट का तत्व बदल रहा है, तो कई मामलों में इसका परिणाम 'पूर्ववत' करने के लिए एक उपयुक्त विकल्प element.style.display = "none"है element.style.display = ""। यह विशेषता displayसे घोषणा को हटाता है style, displayदस्तावेज़ के लिए स्टाइलशीट में निर्धारित मूल्य के लिए संपत्ति का वास्तविक मूल्य प्राप्त करता है (यदि ब्राउज़र को डिफ़ॉल्ट रूप से फिर से परिभाषित नहीं किया गया है तो कहीं और)। लेकिन अधिक विश्वसनीय दृष्टिकोण सीएसएस में एक वर्ग की तरह है

.invisible { display: none; }

और इस वर्ग के नाम को / से जोड़ना / हटाना element.className।

— इल्या स्ट्रेल्टसिन
स्रोत

2

यदि आप ओवरराइड करना चाहते हैं .element { display: none }(उदाहरण के लिए सीएसएस लिबास में परिभाषित) तो .element { display: '' !important }यह काम नहीं करेगा। आपको उपयोग करना होगा.element { display: unset !important }

— tanguy_k

2

मैंने display:noneकेवल जावास्क्रिप्ट में "पूर्ववत करना" के बारे में बताया । बेशक, सीएसएस में खाली स्ट्रिंग काम नहीं करेगी, क्योंकि यह अमान्य मान है। Hovewer, display: unsetआप का सुझाव नहीं हो जाएगी, जैसे, डिफ़ॉल्ट display:blockएक के लिए <div>या डिफ़ॉल्ट display:table-rowएक के लिए <tr>, यह प्रभावी रूप से सब कुछ में बदल जाता है display:inline(जैसे display:initial)। तत्व के लिए ब्राउज़र डिफ़ॉल्ट मान को पुनर्स्थापित करने के लिए, है display:revert, लेकिन यह अच्छी तरह से समर्थित नहीं है ( caniuse.com/#feat=css-revert-value )।

— इल्या स्ट्रेल्ट्सिन

यह स्वीकृत उत्तर होना चाहिए। स्वीकृत उत्तर की d गंजे के विपरीत ’के साथ अच्छी तुलना है, लेकिन गरीब प्रोग्रामर को" गंजा बनाने "-" अब, बाल वापस रखो "को लागू करने से निपटने में मदद करने के लिए कुछ भी नहीं करता है। यह उत्तर आपको बताता है कि उस व्यावहारिक समस्या से कैसे निपटा जाए। Element.style.display = '' त्रुटि प्रवण है, क्योंकि "पुराने बाल" डिफ़ॉल्ट डिस्प्ले नहीं हो सकते हैं, लेकिन 'ब्लॉक' या 'टेबल सेल' या जो भी हो। ".Inv अदृश्य" वर्ग को हटाकर, यहाँ, "अभी बाल वापस डालो" का एकमात्र बग मुक्त कार्यान्वयन है, जहाँ तक मैं देख सकता हूँ। तो, इसे इस तरह से करें, हमेशा

— mathheadinclouds

6

आप उपयोग कर सकते हैं

display: normal;

यह सामान्य के रूप में काम करता है .... इसकी सीएसएस में एक छोटी हैकिंग;)

— Indera
स्रोत

2

यह क्यों ठुकराया जा रहा है? यह यह करने के लिए एक बुरा तरीका है या? यह tablerows के लिए ठीक काम करता है, लेकिन क्या मुझे कुछ और उपयोग करना चाहिए?

— बेंजामिन कारलोग

4

मूल्य 'सामान्य' displayसंपत्ति के लिए एक वैध मूल्य नहीं है , इसलिए इसे सिर्फ अनदेखा किया गया है और प्रभावी रूप से element.style.display = ''असाइनमेंट की तरह काम करता है ( ऊपर मेरा जवाब देखें )।

— इल्या स्ट्रेल्ट्सिन

27

तो दूसरे शब्दों में, आप display: chunk norris;एक ही प्रभाव के लिए इस्तेमाल कर सकते हैं , थोड़ा अधिक किक के साथ।

— केविन बी

1

यदि आप ओवरराइड करना चाहते हैं .element { display: none }(उदाहरण के लिए सीएसएस लिबास में परिभाषित) तो .element { display: normal !important }यह काम नहीं करेगा। आपको उपयोग करना होगा.element { display: unset !important }

— tanguy_k

4

मैं इसका उपयोग display:block; करता हूं यह मेरे लिए काम करता है

— प्रदीप बेहरा
स्रोत

यह केवल उन तत्वों के लिए उपयोगी है जिन्हें आप प्रदर्शित करना चाहते हैं block, यह वह नहीं है जो आप आमतौर पर उदाहरण के लिए एक inlineतत्व के लिए चाहते हैं <span>।

— फ्लिम

3

जैसे पॉल बताता है कि प्रदर्शन के विपरीत कोई शाब्दिक नहीं है: HTML में कोई भी नहीं क्योंकि प्रत्येक तत्व में एक अलग डिफ़ॉल्ट डिस्प्ले है और आप डिस्प्ले को क्लास या इनलाइन शैली आदि के साथ भी बदल सकते हैं।

हालाँकि अगर आप jQuery जैसी किसी चीज़ का उपयोग करते हैं, तो उनका शो और छुपाने का कार्य ऐसा व्यवहार करता है जैसे कि कोई भी नहीं के विपरीत था। जब आप छिपाते हैं, और फिर एक तत्व को फिर से दिखाते हैं, तो यह उसी तरह से प्रदर्शित होगा जैसे कि इसे छिपाने से पहले किया था। वे तत्व के छिपने पर प्रदर्शन संपत्ति के पुराने मूल्य को संग्रहीत करके ऐसा करते हैं कि जब आप इसे फिर से दिखाते हैं तो यह उसी तरह से प्रदर्शित होगा जैसे आपने इसे छिपाने से पहले किया था। https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

इसका अर्थ है कि यदि आप इनलाइन या इनलाइन-ब्लॉक प्रदर्शित करने के लिए एक div सेट करते हैं और आप इसे छिपाते हैं और फिर इसे दिखाते हैं, तो यह एक बार फिर डिस्प्ले इनलाइन या इनलाइन-ब्लॉक के रूप में दिखाएगा जैसा कि पहले था

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

स्क्रिप्ट:

  $('a').click(function(){
        $('div').toggle();
    });

ध्यान दें कि डिव का डिस्प्ले प्रॉपर्टी के छिपे होने के बाद भी स्थिर रहेगा (डिस्प्ले: कोई नहीं) और फिर से दिखाया गया है।

— user3589536
स्रोत

1

"प्रदर्शन: टेबल-सेल" वह था जिसकी मुझे आवश्यकता थी। किसी अन्य उत्तर पर उल्लेख नहीं किया गया था।

— बेंडेको

1

प्रिंटर के अनुकूल स्टाइलशीट के मामले में, मैं निम्नलिखित का उपयोग करता हूं:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

मैंने इसका उपयोग तब किया जब मुझे एक ऐसे फॉर्म को प्रिंट करने की जरूरत थी जिसमें वैल्यूज और इनपुट फील्ड्स को प्रिंट करना मुश्किल था। इसलिए मैंने एक span.print_only टैग (div.print_only अन्यत्र उपयोग किया गया था) में लिपटे मानों को जोड़ा और फिर इनपुट क्षेत्रों के लिए .no_print वर्ग को लागू किया। इसलिए ऑन-स्क्रीन आपको इनपुट फ़ील्ड दिखाई देगी और जब मुद्रित होगी, केवल मान। यदि आप फैंसी प्राप्त करना चाहते हैं तो आप जेएस का उपयोग स्पैन टैग में मूल्यों को अपडेट करने के लिए कर सकते हैं जब फ़ील्ड अपडेट किए गए थे लेकिन मेरे मामले में यह आवश्यक नहीं था। शायद सबसे सुरुचिपूर्ण समाधान नहीं है, लेकिन यह मेरे लिए काम करता है!

— TonyP
स्रोत

1

आप प्रदर्शन का उपयोग कर सकते हैं: ब्लॉक

उदाहरण :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

— आदित्य कुलकर्णी
स्रोत

0

मैं एक ऐप बनाते समय इस चुनौती में भाग गया था जहाँ मुझे कुछ उपयोगकर्ताओं के लिए एक तालिका छिपी चाहिए थी, लेकिन दूसरों के लिए नहीं।

प्रारंभ में मैंने इसे प्रदर्शन के रूप में सेट किया: कोई नहीं, लेकिन फिर प्रदर्शित: उन उपयोगकर्ताओं के लिए इनलाइन-ब्लॉक, जिन्हें मैं इसे देखना चाहता था, लेकिन मैंने उन स्वरूपण मुद्दों का अनुभव किया, जिनकी आप उम्मीद कर सकते हैं (कॉलम समेकित या आम तौर पर गड़बड़)।

जिस तरह से मैंने इसके चारों ओर काम किया, वह पहले तालिका को दिखाना था और फिर उन उपयोगकर्ताओं के लिए "प्रदर्शन: कोई नहीं" था, जो मैं इसे नहीं देखना चाहता था। इस तरह, यह सामान्य रूप से स्वरूपित हुआ लेकिन फिर आवश्यकतानुसार गायब हो गया।

एक पार्श्व समाधान के बिट लेकिन किसी की मदद कर सकते हैं!

— एंड्रयू सेन्सबरी
स्रोत

0

मूल निवासी के साथ काम करने के दौरान 'कोई नहीं' 'फ्लेक्स' के विपरीत है।

— NEELAMADHAB
स्रोत

-2

दृश्यता: छिपा हुआ तत्व छिपाएगा लेकिन तत्व DOM के साथ है। और प्रदर्शन के मामले में: कोई भी इसे DOM से तत्व नहीं हटाएगा।

तो आपके पास तत्व को छिपाने या अनहाइड करने का विकल्प है। लेकिन एक बार जब आप इसे हटा देते हैं (मेरा मतलब है कि कोई नहीं प्रदर्शित करता है) तो इसका विपरीत मूल्य स्पष्ट नहीं है। प्रदर्शन में कई मान होते हैं जैसे डिस्प्ले: ब्लॉक, डिस्प्ले: इनलाइन, डिस्प्ले: इनलाइन-ब्लॉक और कई अन्य। आप इसे W3C से देख सकते हैं।

— हार्दिक सोंडागर
स्रोत

2

अन्य मूल्यों के लिए क्यों नहीं display?

— पॉल डी। वेट

1

क्या यह एक व्यापक सूची है? यह।

— Ry-

-2

के लिए सबसे अच्छा जवाब display: noneहै

display:inline

या

display:normal

— यासिर
स्रोत

2

ऐसा लगता है कि जैसी कोई बात नहीं है display:normal। देखिए developer.mozilla.org/en-US/docs/Web/CSS/display

— Pang

-3

आप इस का उपयोग कर सकते हैं display:block;और जोड़ भी सकते हैंoverflow:hidden;

— बेल
स्रोत

1

कृपया अपना योगदान देने से पहले मौजूदा उत्तर पढ़ें। पिछले मई से एक अच्छा, अच्छी तरह से उकेरा गया, और स्वीकृत उत्तर है और नकारात्मक वोटों के साथ एक उत्तर भी है जो आपके लिए अधिक-या-कम समान है।

— क्वेंटिन

मैंने जवाब देखा। प्रदर्शन: परेशान न करें और साथ ही प्रदर्शन: ब्लॉक। मेरी राय :) @ क्वेंटिन

— बेल

और display: blockएक <span>या एक <td>… पर अच्छा काम नहीं करता है और एक पिछला जवाब पहले ही उल्लेख किया गया है display: block।

— क्वेंटिन

2

आपने उल्लेख का उत्तर संपादित किया है overflow: hidden। क्यों? उसे जोड़ने का क्या मतलब है? इसका पूर्ववत करने से कोई लेना-देना नहीं है display: none।

— क्वेंटिन

-4

सबसे अच्छा "विपरीत" इसे डिफ़ॉल्ट मान पर लौटना होगा जो है:

display: inline

— TimNguyenBSM
स्रोत

बस स्पष्ट करना चाहते हैं कि प्रदर्शन संपत्ति का डिफ़ॉल्ट मान नहीं है, HTML तत्व हालांकि करता है। DIV का डिफ़ॉल्ट मान प्रदर्शित होगा: ब्लॉक, एक SPAN प्रदर्शित करने के लिए डिफ़ॉल्ट होगा: इनलाइन। लेकिन इस पर प्रदर्शन संपत्ति का डिफ़ॉल्ट मान नहीं है।

— केविनियस