आप CSS प्रॉपर्टीज़ display: none या visibility: hidden का उपयोग करके CSS में एक एलिमेंट को छिपा सकते हैं। display: none पूरे एलिमेंट को पेज से हटा देता है और पेज के लेआउट को प्रभावित कर सकता है। visibility: hidden एलिमेंट को छिपाता है जबकि स्पेस को समान रखता है।
आप एक ऐसे परिदृश्य का सामना कर सकते हैं जहां आप वेब पेज पर एक एलिमेंट को छिपाना चाहते हैं। उदाहरण के लिए, आपके पास टेक्स्ट का एक ब्लॉक हो सकता है जिसे आप छिपा कर रखना चाहते हैं और जब कोई उपयोगकर्ता बटन पर क्लिक करता है तो दिखाई देता है।
CSS में एलिमेंट को छिपाने के लिए दो मुख्य दृष्टिकोण हैं, का उपयोग करके:
- display: none एट्रिब्यूट।
- visibility: hidden एट्रिब्यूट।
पहला दृष्टिकोण आपके वेब पेज के लेआउट को प्रभावित कर सकता है। लेकिन, दूसरी विधि फिर भी लोकप्रिय है।
CSS एलिमेंट छिपाएं: display
display प्रॉपर्टी नियंत्रित करती है कि एलिमेंट वेब पेज पर कैसे प्रदर्शित होता है। HTML दस्तावेज़ में हर एलिमेंट का display प्रॉपर्टी के लिए एक डिफ़ॉल्ट मान होता है, हालांकि वह मान एलिमेंट पर निर्भर करता है। अधिकांश एलिमेंट्स के लिए, डिफ़ॉल्ट display मान या तो block या inline होता है।
यदि आप किसी एलिमेंट को बिल्कुल भी प्रदर्शित नहीं करना चाहते हैं, तो आप display प्रॉपर्टी के मान को none पर सेट कर सकते हैं।
निम्न स्टाइल नियम वेब पेज पर एक एलिमेंट को छिपाता है:
जब आप display के मान को none पर सेट करते हैं, तो प्रभावित एलिमेंट गायब हो जाएगा। इसका मतलब है कि एलिमेंट वेब पेज पर कोई स्थान नहीं लेगा।
display: none उदाहरण
मान लें कि हम एक स्थानीय कुकरी क्लब के लिए About Us वेब पेज डिजाइन कर रहे हैं। हमारे प्रारंभिक डिजाइन में, हमने पेज पर केक की एक इमेज जोड़ी। अब क्लब चाहता है कि हम इमेज को छिपाएं क्योंकि वे अंतिम डिजाइन के बारे में सुनिश्चित नहीं हैं।
हम निम्न कोड का उपयोग करके पेज पर इमेज को छिपा सकते हैं:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>द सुपरस्टार बेकर्स क्लब, 2014 में स्थापित, चार्ल्सटन, S.C. क्षेत्र के भावुक कुक और बेकर का एक समुदाय है। क्लब में 100 से अधिक सदस्य हैं और नए व्यंजनों के साथ विचारों को साझा करने और प्रयोग करने के लिए प्रत्येक सप्ताह मिलते हैं।</p> </div> <style> img { display: none; } <style>
ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमने HTML <div> टैग के भीतर तीन एलिमेंट्स को परिभाषित किया। <h1> एलिमेंट का उपयोग हमारे हेडर को बनाने के लिए किया जाता है, और इसमें टेक्स्ट About Us होता है। हमारा HTML <img> एलिमेंट केक की एक इमेज बनाता है, जो 200px लंबा और 200px चौड़ा है। <p> एलिमेंट में क्लब का संक्षिप्त विवरण होता है।
हमारे CSS कोड में, हम अपने पेज पर सभी इमेज टैग्स का चयन करने के लिए "img" सेलेक्टर का उपयोग करते हैं। यह नियम सभी <img> टैग्स की display प्रॉपर्टी को none पर सेट करता है। या दूसरे शब्दों में, स्टाइल नियम हमारी इमेज को छिपाता है।
हालांकि हमारी इमेज छिपी हुई है, फिर भी यह हमारे वेब पेज पर मौजूद है। यदि हम अपनी इमेज को वापस लाना चाहते हैं, तो हम या तो display:none; स्टाइल को हटा सकते हैं। या, हम एक और डिस्प्ले स्टाइल निर्दिष्ट कर सकते हैं (जैसे block या inline)।
आप इस नियम को इंलाइन HTML एट्रिब्यूट के रूप में परिभाषित कर सकते हैं:
<img style=”display: none;” src=”https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height=”200″ width=”200″ />
इंलाइन HTML और CSS प्रॉपर्टीज़ के बारे में अधिक जानने के लिए, हमारे इंलाइन CSS गाइड को देखें।
CSS एलिमेंट छिपाएं: visibility
CSS visibility प्रॉपर्टी का उपयोग यह नियंत्रित करने के लिए किया जाता है कि कोई एलिमेंट वेब पेज पर दृश्यमान है या नहीं।
डिफ़ॉल्ट रूप से, visibility प्रॉपर्टी का मान visible होता है। हालांकि, यदि आप किसी इमेज को अदृश्य बनाना चाहते हैं, तो आप visibility के मान को hidden पर सेट कर सकते हैं।
निम्न स्टाइल नियम एलिमेंट की विजिबिलिटी को hidden पर सेट करता है:
आइए पहले के कुकिंग क्लब उदाहरण पर वापस चलते हैं। मान लें कि हम अपने About Us वेब पेज पर केक की इमेज को छिपाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>द सुपरस्टार बेकर्स क्लब, 2014 में स्थापित, चार्ल्सटन, S.C. क्षेत्र के भावुक कुक और बेकर का एक समुदाय है। क्लब में 100 से अधिक सदस्य हैं और नए व्यंजनों के साथ विचारों को साझा करने और प्रयोग करने के लिए प्रत्येक सप्ताह मिलते हैं।</p> </div> <style> img { display: visibility; } <style>
ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
इस उदाहरण में हमारा HTML कोड समान है। हमारी CSS फाइल में, display प्रॉपर्टी के बजाय, हमने अपने एलिमेंट को छिपाने के लिए visibility का उपयोग किया। जैसा कि आप ऊपर देख सकते हैं, हमारी इमेज वेब पेज से छिपी हुई है।
जबकि हमारी इमेज चली गई है, अब हमारे हेडर और पैराग्राफ के बीच एक स्पेस है जहां इमेज रखी गई होती। यह visibility: hidden; स्टाइल की एक विशेषता है। मूल एलिमेंट का स्पेस अभी भी वेब पेज द्वारा रखा जाता है। लेकिन, एलिमेंट छिपा हुआ है।
CSS Visibility बनाम Display
एलिमेंट को छिपाने के जिन दो तरीकों पर हमने चर्चा की है, वे समान प्रतीत होते हैं, लेकिन दोनों के बीच अंतर है।
display: none नियम HTML दस्तावेज़ से एक एलिमेंट को हटा देता है। जबकि छिपे हुए एलिमेंट का कोड अभी भी मौजूद है, एलिमेंट स्वयं प्रदर्शित नहीं होगा।
visibility: hidden नियम, दूसरी ओर, एक एलिमेंट को छुपाता है, लेकिन एलिमेंट अभी भी वेब पेज पर स्थान लेगा। यदि आप एक एलिमेंट को छिपाना चाहते हैं लेकिन उस एलिमेंट के स्थान को वेब पेज पर रखना चाहते हैं, तो visibility: hidden; नियम का उपयोग करना सबसे अच्छा है।
"करियर कर्मा मेरे जीवन में तब आया जब मुझे इसकी सबसे अधिक आवश्यकता थी और जल्दी से मुझे एक बूटकैंप से मिलाने में मदद की। स्नातक होने के दो महीने बाद, मुझे अपनी ड्रीम जॉब मिली जो जीवन में मेरे मूल्यों और लक्ष्यों के साथ संरेखित थी!"
अपना बूटकैंप मैच खोजें
निष्कर्ष
display: none नियम एक एलिमेंट को दस्तावेज़ से हटा देता है और इसे दृश्य से छुपाता है। visibility: hidden नियम एक एलिमेंट को दस्तावेज़ पर छुपाता है और उस स्थान को खाली छोड़ देता है जिसमें एलिमेंट दिखाई देता।
क्या आप CSS के बारे में अधिक जानना चाहते हैं? हमारा CSS सीखने का गाइड पढ़ें। यह गाइड CSS सीखने के तरीके पर कार्रवाई योग्य सलाह से भरा है। आपको अपने ज्ञान को आगे बढ़ाने के लिए उपयोग कर सकने वाले शीर्ष संसाधनों की सूची भी मिलेगी।
