दृश्यता के बीच अंतर क्या है: छिपा हुआ और प्रदर्शन: कोई नहीं?

1173

सीएसएस नियम visibility:hiddenऔर display:noneतत्व दोनों में परिणाम दिखाई नहीं दे रहा है। क्या ये पर्यायवाची हैं?

css visibility

1475

display:noneइसका मतलब है कि प्रश्न में टैग पृष्ठ पर बिल्कुल भी दिखाई नहीं देगा (हालांकि आप अभी भी डोम के माध्यम से इसके साथ बातचीत कर सकते हैं)। अन्य टैग के बीच इसके लिए कोई स्थान आवंटित नहीं किया जाएगा।

visibility:hiddenइसका मतलब है कि इसके विपरीत display:none, टैग दिखाई नहीं देता है, लेकिन पृष्ठ पर इसके लिए स्थान आवंटित किया जाता है। टैग प्रदान किया गया है, यह सिर्फ पृष्ठ पर नहीं देखा गया है।

उदाहरण के लिए:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

परिणामों के [style-tag-value]साथ प्रतिस्थापित करना display:none:

test |   | test

परिणामों के [style-tag-value]साथ प्रतिस्थापित करना visibility:hidden:

test |                        | test

— kemiller2002
स्रोत

14

एक और दूसरे के प्रदर्शन के बारे में कोई टिप्पणी नहीं? मैं जिज्ञासु हूं कि किस विधि का उपयोग करने के लिए बिल्कुल तैनात तत्वों को छिपाने के लिए, जो कि अक्सर प्रदर्शित होते हैं और छिपे हुए होते हैं।

— टॉम ज़ातो - मोनिका

2

यह कुल अनुमान है कि मैंने कोई परीक्षण नहीं किया है, लेकिन मुझे लगता है कि वे उसी के बारे में हैं। जैसे ही स्क्रीन पर कुछ बदलता है पूरी स्क्रीन फिर से रेंडर (कम से कम इसका इस्तेमाल किया जाता है), और इसलिए यह वास्तव में मायने नहीं रखता है। आप अभी भी एक स्क्रीन रिप्रेंट मजबूर कर रहे हैं। यह बहुत ब्राउज़र द्वारा ब्राउज़र कर सकता है, और सच में इन पर ध्यान केंद्रित करने की तुलना में कोड को अनुकूलित करने के बेहतर तरीके हैं।

— kemiller2002

13

@ केविन उस में सही है visibility: hiddenऔर display: noneसमान रूप से प्रदर्शन के बाद से वे दोनों लेआउट लेआउट, पेंट और समग्र होगा। हालाँकि, opacity: 0कार्यात्मक रूप से समतुल्य है visibility: hiddenऔर लेआउट कदम को पीछे नहीं हटाता है, इसलिए मैं इसका उपयोग करने की सलाह दूंगा यदि आपको खाली स्थान अभी भी आवंटित नहीं किया गया है (अन्यथा उपयोग करें display: none)।

— jayrobin

76

दृश्यता बनाम प्रदर्शन के बारे में बात करते समय सीएसएस-बदलाव को ध्यान में रखना महत्वपूर्ण है। उदाहरण के लिए, दृश्यता से टॉगल करना: छिपा हुआ; दृश्यता के लिए: दृश्यमान; सीएसएस-संक्रमण का उपयोग करने की अनुमति देता है, जबकि प्रदर्शन से टॉगल करना: कोई नहीं; प्रदर्शित करने के लिए: ब्लॉक; नहीं करता। दृश्यता: छिपी हुई जावास्क्रिप्ट घटनाओं पर कब्जा न करने का अतिरिक्त लाभ है, जबकि अस्पष्टता: 0; घटनाओं को पकड़ता है।

— माइकल डील

9

opacity: 0इनपुट या बटन के साथ काम करते समय सावधानी के साथ प्रयोग किया जाना चाहिए, क्योंकि वे अभी भी मौजूद हैं और संभवतः अजीब उपयोगकर्ता इंटरैक्शन का कारण बन सकते हैं।

— जैक्स mouette

233

वे पर्यायवाची नहीं हैं।

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

visibility:hidden पृष्ठ के सामान्य प्रवाह में तत्व को छोड़ देता है जैसे कि अभी भी जगह घेरे हुए है।

कल्पना कीजिए कि आप एक मनोरंजन पार्क में सवारी के लिए कतार में हैं और पंक्ति में कोई व्यक्ति इतना उपद्रवी हो जाता है कि सुरक्षा उन्हें लाइन से हटा देती है। लाइन में हर कोई तब खाली स्लॉट भरने के लिए एक स्थान आगे बढ़ेगा। यह जैसा है display:none।

इसी तरह की स्थिति के साथ विरोधाभास है, लेकिन यह कि आपके सामने कोई व्यक्ति अदृश्यता लाद देता है। लाइन देखते समय, ऐसा लगेगा कि कोई खाली जगह है, लेकिन लोग वास्तव में उस खाली स्थान को नहीं भर सकते क्योंकि कोई अभी भी है। यह जैसा है visibility:hidden।

— user22151
स्रोत

3

उनके बीच एक और बड़ा अंतर है: क्रोम में कम से कम, दृश्यता का उपयोग संक्रमण-विलंब के साथ किया जा सकता है लेकिन प्रदर्शन इसे अनदेखा करता है।

— नीलमणि

1

समझाने का मजेदार तरीका, लेकिन दिलचस्प। :)

— एलंगो पॉल विक्टर

107

जोड़ने लायक एक बात, हालांकि यह नहीं पूछा गया, कि वस्तु को पूरी तरह से पारदर्शी बनाने का एक तीसरा विकल्प है। विचार करें:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

स्निपेट का विस्तार करें

(परिणाम देखने के लिए ऊपर "रन कोड स्निपेट" बटन पर क्लिक करें।)

1 और 2 के बीच अंतर पहले ही इंगित किया जा चुका है (अर्थात्, 2 अभी भी जगह लेता है)। हालाँकि, 2 और 3 के बीच अंतर है: 3 के मामले में, माउस अभी भी हाथ पर स्विच करेगा जब लिंक पर मँडरा जाएगा, और उपयोगकर्ता अभी भी लिंक पर क्लिक कर सकता है, और जावास्क्रिप्ट ईवेंट्स लिंक पर अभी भी आग लगाएंगे। यह आमतौर पर वह व्यवहार नहीं है जिसे आप चाहते हैं (लेकिन शायद कभी-कभी ऐसा है?)।

एक अन्य अंतर यह है कि यदि आप पाठ का चयन करते हैं, तो सादे पाठ के रूप में कॉपी / पेस्ट करें, आपको निम्नलिखित मिलते हैं:

1st link.
2nd  link.
3rd unseen link.

मामले में 3 पाठ की प्रतिलिपि बनाई जाती है। हो सकता है कि यह कुछ प्रकार के वॉटरमार्किंग के लिए उपयोगी होगा, या यदि आप एक कॉपीराइट नोटिस छिपाना चाहते थे, जो दिखाएगा कि क्या लापरवाह उपयोगकर्ता आपकी सामग्री को कॉपी / पेस्ट करता है?

— रात बिताने का स्थान
स्रोत

क्या आप एक उदाहरण प्रदान कर सकते हैं? यहाँ एक jsfiddle है जहाँ एक छिपे हुए तत्व (मैंने div और स्पैन की कोशिश की) जो इसके कंटेनर में एकमात्र तत्व है, और यह अभी भी जगह लेता है: jsfiddle.net/rmb5wdLd/1

— Kip

@ किप, अजीब - मैं अब ऐसा नहीं कर सकता (और मैंने अपना प्रोजेक्ट भी बदल दिया)। ठीक है, मैं अपनी पिछली टिप्पणी को बेहतर तरीके से निकालूंगा और जब मेरे पास एक ठोस टेस्टकेस होगा, तो मैं इसे दिखाऊंगा, शोर के लिए खेद है।

— ग्रीनोल्डमैन

89

display:none तत्व को लेआउट के प्रवाह से हटाता है।

visibility:hidden इसे छुपाता है लेकिन जगह छोड़ देता है।

— mmaibaum
स्रोत

70

चाइल्ड नोड्स की बात करें तो इसमें बड़ा अंतर है। उदाहरण के लिए: यदि आपके पास माता-पिता का डिव और नेस्टेड चाइल्ड डिव है। तो अगर आप इस तरह लिखते हैं:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

इस मामले में कोई भी विभाजक दिखाई नहीं देगा। लेकिन अगर आप इस तरह लिखते हैं:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

फिर चाइल्ड डिव दिखाई देगा जबकि पैरेंट डिव नहीं दिखाया जाएगा।

— गोविंदा
स्रोत

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

— Drenai

18

वे समानार्थक शब्द नहीं हैं - display: noneपृष्ठ के प्रवाह से तत्व को हटाता है, और शेष पृष्ठ बहता है जैसे कि यह नहीं था।

visibility: hidden तत्व को दृश्य से छिपाता है, लेकिन पृष्ठ प्रवाह नहीं, पृष्ठ पर इसके लिए स्थान छोड़ता है।

— ConroyP
स्रोत

15

display: none पृष्ठ से तत्व को पूरी तरह से हटा देता है, और पृष्ठ को ऐसे बनाया जाता है जैसे कि तत्व बिल्कुल भी नहीं थे।

Visibility: hidden दस्तावेज़ प्रवाह में जगह छोड़ देता है, भले ही आप इसे अब नहीं देख सकते।

आप जो कर रहे हैं, उसके आधार पर यह एक बड़ा अंतर हो सकता है या नहीं भी।

— डब्ल्यूसीएम
स्रोत

$ ('# एलिमेंट') का उपयोग करना। पेज (DOM) से एलिमेंट () को पूरी तरह से हटा देता है। इसे प्रदर्शित नहीं करना या अंतरिक्ष का उपयोग नहीं करना इसका मतलब यह नहीं है कि इसे हटा दें। आप अभी भी एक साधारण $ ('# तत्व') (शो) () के साथ इसकी स्थिति बदल सकते हैं, इसलिए यह "पूरी तरह से हटा" नहीं है।

— foxontherock

11

visibility:hiddenऑब्जेक्ट के साथ अभी भी पृष्ठ पर ऊर्ध्वाधर ऊंचाई लेता है। इसके साथ display:noneपूरी तरह से हटा दिया गया है। यदि आपके पास छवि के नीचे पाठ है और आप करते हैं display:none, तो वह पाठ उस स्थान को भरने के लिए स्थानांतरित हो जाएगा जहां छवि थी। यदि आप दृश्यता करते हैं: छिपा हुआ पाठ उसी स्थान पर रहेगा।

— स्टीवन विलियम्स
स्रोत

छिपी के साथ, संरक्षित स्थान केवल ऊर्ध्वाधर आयाम है। क्षैतिज रूप से क्या होगा?

— क्रिस नू

2

क्षैतिज आयाम भी संरक्षित है।

— जेबी हर्टको 12

9

display:noneतत्व को छिपाएगा और अंतरिक्ष को ढहा रहा है, जबकि visibility:hiddenतत्व को छिपाएगा और तत्वों को संरक्षित करेगा। प्रदर्शन: कोई भी IE और Safari के पुराने संस्करणों में जावास्क्रिप्ट से उपलब्ध कुछ गुणों को भी प्रभावित नहीं करता है।

— slashnick
स्रोत

7

अन्य सभी उत्तरों के अलावा, IE8 के लिए एक महत्वपूर्ण अंतर है: यदि आप उपयोग करते हैं display:noneऔर तत्व की चौड़ाई या ऊँचाई प्राप्त करने का प्रयास करते हैं, तो IE8 0 लौटता है (जबकि अन्य ब्राउज़र वास्तविक आकार वापस कर देंगे)। IE8 केवल के लिए सही चौड़ाई या ऊंचाई देता है visibility:hidden।

— szeryf
स्रोत

7

visibility:hiddenअंतरिक्ष को संरक्षित करता है; display:noneऐसा नहीं करता।

— मोती
स्रोत

6

display: none;

यह पृष्ठ पर उपलब्ध नहीं होगा और किसी स्थान पर कब्जा नहीं करता है।

visibility: hidden;

यह एक तत्व को छुपाता है, लेकिन यह अभी भी पहले की तरह ही जगह लेगा। तत्व छिपा होगा, लेकिन फिर भी, लेआउट को प्रभावित करेगा।

visibility: hiddenअंतरिक्ष को संरक्षित करें, जबकि display: noneअंतरिक्ष को संरक्षित न करें।

कोई भी उदाहरण न दिखाएँ: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

दृश्यता छिपी उदाहरण: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

— अनु
स्रोत

मैं वेबसाइट पर ज्ञात अशुद्धियों के कारण w3schools से लिंक करने के खिलाफ सलाह दूंगा।

— स्केयर

5

यदि दृश्यता गुण सेट हो जाता है "hidden", तो ब्राउज़र अभी भी सामग्री के लिए पृष्ठ पर जगह लेगा, भले ही वह अदृश्य हो।
लेकिन जब हम एक ऑब्जेक्ट सेट करते हैं "display:none", तो ब्राउज़र अपनी सामग्री के लिए पृष्ठ पर जगह आवंटित नहीं करता है।

उदाहरण:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

विवरण देखें

— शुभलाल कुमार
स्रोत

4

visibility:hidden पृष्ठ में तत्व रखेगा और उस स्थान पर कब्जा कर लेगा लेकिन उपयोगकर्ता को नहीं दिखाता है।

display:none पृष्ठ में उपलब्ध नहीं होगा और किसी स्थान पर कब्जा नहीं करता है।

— रमेश
स्रोत

3

एक अन्य अंतर यह है कि visibility:hiddenवास्तव में, वास्तव में पुराने ब्राउज़रों में काम करता है, और display:noneनहीं:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

— डेव बर्टन
स्रोत

2

अंतर शैली से परे है और यह प्रतिबिंबित होता है कि जावास्क्रिप्ट के साथ हेरफेर करने पर तत्व कैसे व्यवहार करते हैं।

प्रभाव और दुष्प्रभाव display: none:

लक्ष्य तत्व को दस्तावेज़ प्रवाह से बाहर ले जाया जाता है (अन्य तत्वों के लेआउट को प्रभावित नहीं करता है);
सभी वंशज प्रभावित होते हैं (या तो प्रदर्शित नहीं होते हैं और इस विरासत के "बाहर" स्नैप नहीं कर सकते हैं);
माप लक्ष्य तत्व के लिए और न ही उसके वंश के लिए नहीं बनाया जा सकता है - वे, इस प्रकार सभी में गाया नहीं कर रहे हैं उनके clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), सभी वापसी 0रों।

प्रभाव और दुष्प्रभाव visibility: hidden:

लक्ष्य तत्व दृश्य से छिपा हुआ है, लेकिन प्रवाह से बाहर नहीं निकाला जाता है और लेआउट को प्रभावित करता है, इसके सामान्य स्थान पर कब्जा कर लेता है;
innerText(लेकिन नहीं innerHTML) लक्ष्य तत्व और वंशज खाली स्ट्रिंग लौटाते हैं।

— एडम जगोसज़
स्रोत

1

display:none;न तो तत्व प्रदर्शित करेगा और न ही पृष्ठ पर तत्व के लिए स्थान आवंटित visibility:hidden;करेगा जबकि पृष्ठ पर तत्व प्रदर्शित नहीं करेगा लेकिन पृष्ठ पर स्थान आवंटित करेगा। हम दोनों मामलों में DOM में एलिमेंट एक्सेस कर सकते हैं। इसे बेहतर तरीके से समझने के लिए कृपया निम्नलिखित कोड देखें: प्रदर्शन: कोई नहीं दृश्यता: छिपा हुआ

— प्रीतम बोहरा
स्रोत

0

यहाँ बहुत सारे विस्तृत उत्तर हैं, लेकिन मैंने सोचा कि मुझे इसे अभिगम्यता को संबोधित करने के लिए जोड़ना चाहिए क्योंकि इसके निहितार्थ हैं।

display: none;और visibility: hidden;सभी स्क्रीन रीडर सॉफ़्टवेयर द्वारा नहीं पढ़ा जा सकता है। ध्यान रखें कि दृष्टिहीन उपयोगकर्ता क्या अनुभव करेंगे।

सवाल पर्यायवाची के बारे में भी पूछता है। text-indent: -9999px;एक दूसरे के बराबर है। इसके साथ महत्वपूर्ण अंतर text-indentयह है कि इसे अक्सर स्क्रीन पाठकों द्वारा पढ़ा जाएगा। यह एक बुरा अनुभव हो सकता है क्योंकि उपयोगकर्ता अभी भी लिंक पर टैब कर सकते हैं।

एक्सेसिबिलिटी के लिए, मैं आज जो कुछ भी देखता हूं, वह स्क्रीन रीडर्स को दिखाई देते हुए किसी तत्व को छिपाने के लिए शैलियों का संयोजन है।

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

एक महान अभ्यास सामग्री के मुख्य शरीर के लंगर के लिए "सामग्री पर जाएं" लिंक बनाना है। दृष्टिबाधित उपयोगकर्ता शायद हर एक पृष्ठ पर आपके पूर्ण नेविगेशन ट्री को सुनना नहीं चाहते हैं। लिंक को नेत्रहीन छिपाएं। उपयोगकर्ता लिंक तक पहुंचने के लिए टैब को हिट कर सकते हैं।

पहुँच और छिपी हुई सामग्री पर अधिक जानकारी के लिए, देखें:

— क्लीवर
स्रोत