किसी भी HTML टैग को छिपाने का सही तरीका क्या है?

Question

किसी भी एचटीएमएल को छिपाने के लिए उचित सीएसएस क्या है। उदाहरण- <div> टैग की तरह। मैं यह करने के का उपयोग करें:

div {display:none; visibility:hidden;} 

सीएसएस का समर्थन करता है सभी प्रमुख ब्राउज़रों कि div छिपाने के लिए करता है। विशेष रूप से यह आईई का समर्थन करता है।

Answer 1

display:none और visibility:hidden दोनों सीएसएस-सक्षम ब्राउज़र द्वारा सार्वभौमिक रूप से समर्थित हैं, इसलिए केवल सामान्य CSS caveat लागू होते हैं। अलग-अलग प्रभाव पड़ते हैं: display:none दस्तावेज़ को प्रस्तुत करने का कारण बनता है जैसे तत्व बिल्कुल नहीं थे, जबकि visibility:hidden का अर्थ है कि दस्तावेज़ स्वरूपित करते समय तत्व विधिवत संसाधित किया जाएगा, आमतौर पर कुछ स्थान पर कब्जा कर लिया जाएगा, लेकिन दृश्य से हटा दिया गया है पूरी तरह पारदर्शी हो गए थे।

जो भी आप उपयोग करते हैं वह तत्व को छुपाने के आपके लक्ष्य पर निर्भर करता है। उदाहरण के लिए, यदि आप गतिशील रूप से (क्लाइंट-साइड स्क्रिप्ट के साथ) कुछ सामग्री बंद या बंद करते हैं, तो visibility:hidden बेहतर हो सकता है क्योंकि इससे अन्य सामग्री का पुनर्वितरण नहीं होता है।

दोनों का उपयोग करना, सामान्य रूप से व्यर्थ है display:none बनाता है के रूप में visibility:hidden अप्रासंगिक (हालांकि झरना में, यह हो सकता है कि इन गुणों के लिए अपनी सेटिंग अन्य स्टाइल शीट द्वारा ओवरराइड किया जा सकता है, और फिर display:none प्रभाव खो सकते हैं)।

Answer 2

आपको visibility:hidden; की भी आवश्यकता नहीं है।

div { 
    display:none; 
} 

ऊपर पर्याप्त होना चाहिए। और यह सभी ब्राउज़रों में काम करता है। यह तत्व को पूरी तरह से छुपाता है, जैसा कि, अब पृष्ठ लेआउट में इसका कोई प्रभाव नहीं पड़ेगा।

Answer 3

display : none; इस

Answer 4

उपयोग visibility: hidden; करने के लिए अगर आप अभी भी तत्व चाहते पेज लेआउट में स्थान ले करने के लिए पर्याप्त और मानक तरीका है। उदाहरण के लिए:

Hello 
 
<div style="visibility: hidden; height: 100px;">Hidden</div> 
 
World

आप अभी भी पाठ के दो टुकड़ों के बीच 100px देखेंगे, लेकिन आप div भीतर सामग्री नहीं देख सकेंगे।

का उपयोग करना:

Hello 
 
<div style="display: none; height: 100px;">Hidden</div> 
 
World​​​​​

, दो पाठ तत्वों के बीच कोई स्थान नहीं होगा के रूप में div बिल्कुल लेआउट को प्रभावित नहीं करेगा।

दोनों किसी भी आधुनिक ब्राउज़र में समर्थित हैं जिन्हें आप सोच सकते हैं।

Answer 5

एचटीएमएल 5 में वहाँ एक नया वैश्विक विशेषता hidden कहा जाता है।

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden से:

छिपा वैश्विक विशेषता एक बूलियन विशेषता यह दर्शाता है कि तत्व अभी तक नहीं है, या नहीं रह गया है, प्रासंगिक है।उदाहरण के लिए, इसका उपयोग उस पृष्ठ के तत्वों को छिपाने के लिए किया जा सकता है जिसका उपयोग तब तक नहीं किया जा सकता जब तक कि लॉगिन प्रक्रिया पूरी नहीं हो जाती। ब्राउज़र छुपा विशेषता सेट के साथ तत्व प्रस्तुत नहीं करेगा।

खबरदार कि hidden एक अर्थ अर्थ display और visibility की तुलना में है। यही कारण है कि यह एक सीएसएस विशेषता नहीं है, लेकिन एक HTML विशेषता है।