तत्वों को छिपाते समय पृष्ठ लेआउट को संरक्षित करना

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

प्रदर्शन अक्षम करना

इस चुनौती को दूर करने के लिए, प्रदर्शन संपत्ति को नियोजित करने की अनुशंसा की जाती है। तत्व के प्रदर्शन को किसी पर सेट करने से, यह दृश्य प्रतिनिधित्व से प्रभावी रूप से गायब हो जाता है, जैसे कि इसे DOM से पूरी तरह से हटा दिया गया हो।

निम्नलिखित उदाहरण पर विचार करें:

प्रारंभ में, div तत्व सामान्य रूप से प्रदर्शित होता है। इसे छिपाने के लिए:
#element {
  display: none;
}
जब डिस्प्ले: कोई नहीं लागू किया जाता है, तो तत्व दृष्टिगत रूप से अनुपस्थित हो जाता है, जिससे पहले से व्याप्त स्थान खाली हो जाता है। तत्व की दृश्यता बहाल करने के लिए:
#element {
  display: block;  
}
प्रदर्शन का उपयोग करने के लाभ: कोई नहीं
पेज के लेआउट को सुरक्षित रखता है
HTML कोड में तत्व की स्थिति बनाए रखता है
डिस्प्ले सेट करके तत्व को आसानी से दोबारा प्रदर्शित करने की अनुमति देता है: ब्लॉक