उन तत्वों को कैसे छिपाया जाए जिनके बिना वे पृष्ठ पर जगह लेते हैं?

Question

मैं visibility:hiddenकुछ तत्वों को छिपाने के लिए उपयोग कर रहा हूं , लेकिन वे अभी भी छिपे हुए पृष्ठ पर जगह लेते हैं।

मैं उन्हें पूरी तरह से नेत्रहीन कैसे गायब कर सकता हूं, जैसे कि वे डोम में बिल्कुल नहीं हैं (लेकिन वास्तव में उन्हें डोम से हटाए बिना)?

Comments

यह प्रश्न बहुत ही मृत है, लेकिन मैं एक टिप्पणी जोड़ रहा हूं क्योंकि मैंने हाल ही में खुद को एक ऐसी स्थिति में पाया है जो अन्य लोग अनुभव कर सकते हैं। मुझे एक तत्व को छिपाने की आवश्यकता है और इसे अपने पास बनाए रखना हैoffsetTop , और display:noneइसे 0 पर सेट करना होगा offsetTop। मेरा समाधान यहां उपयोग करना था, visibility: hiddenफिर चौड़ाई और ऊंचाई को 0. पर सेट करना था। एक बार जब मुझे तत्व को फिर से दिखाई देने की आवश्यकता थी, तो मैंने तीन विशेषताओं का उपयोग करके हटा दिया जावास्क्रिप्ट। एक हैकी समाधान का एक सा, लेकिन यह बहुत ज्यादा सभी मामलों का उपयोग करने के लिए अच्छी तरह से काम करता है।

— 1932

Answer 1

display:noneछिपाने के लिए और display:blockदिखाने के लिए सेट करने का प्रयास करें ।

Comments

यह संभव नहीं है कि डोम मैन से तत्व को हटाया जाए। इस विकल्प का उपयोग करके भी। प्रश्न पढ़ें

— प्रणय राणा

नहीं सभी आइटम होना चाहिए display: block, कुछ करने के लिए सेट करना होगा display: inline(जैसे <span>या <a>या <img>डोम तत्व)।

— मौरो

@pranay सवाल उन्हें डोम से नहीं हटाने के लिए छिपाने के लिए कहता है।

— मौरो

@pranay: सवाल बहुत अच्छी तरह से व्यक्त नहीं किया गया है, लेकिन उपयोगकर्ता जिस समस्या का हल कर रहा है, हुसोम उसे हल कर रहा है।

— क्लाउडियो रेडी

एक सुधार: एक सीएसएस वर्ग बनाने के लिए कहा जाता hiddenहै display: none। इसे छिपाने के लिए एक तत्व में वर्ग जोड़ें, इसे दिखाएं। इसे हटाते समय, displayगुण को डिफ़ॉल्ट पर पुनर्स्थापित किया जाता है।

— अलेजांद्रो सी डे बाका

Answer 2

इसके बजाय शैली का उपयोग करें

<div style="display:none;"></div>

Comments

दुर्भाग्य से यह मेरे लिए काम नहीं करता है - प्रदर्शन का उपयोग करना: कोई भी अभी भी खाली स्थान नहीं छोड़ता है।

— mbuc91

Answer 3

उपयोग करने के लिए display:noneबस एक तत्व को निकालने के लिए एक अच्छा विकल्प है लेकिन इसे स्क्रीन्रेडर्स के लिए भी हटा दिया जाएगा । वहाँ भी चर्चा कर रहे हैं अगर यह एसईओ प्रभाव। उस सूची के अलावा ए विषय पर एक अच्छा, छोटा लेख है

यदि आप वास्तव में सिर्फ छिपाना चाहते हैं और एक तत्व को नहीं निकालना चाहते हैं , तो बेहतर उपयोग करें:

div {
  position: absolute; 
  left: -999em;
}

इसकी तरह यह भी स्क्रीन पाठकों द्वारा पढ़ा जा सकता है।

इस पद्धति का एकमात्र नुकसान यह है कि यह DIV वास्तव में प्रदान किया गया है और यह प्रदर्शन को प्रभावित कर सकता है , खासकर मोबाइल फोन पर।

Comments

यदि आप कुछ ऐसे मामलों को चुन सकते हैं, जिन्हें आप ज्यादातर मामलों में पूरा कर सकते हैं visibility: hidden;, तो आप कहेंगे कि आपके पास अन्य पूर्ण तत्व हैं, जिनके पास अंतरिक्ष के लिए संघर्ष नहीं होगा, बस संघर्ष होगा z-index। बस एक तत्व को छिपाने के लिए मैं visibility

— Dejan.S

Answer 4

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

Answer 5

इस सवाल का जवाब प्रदर्शन का उपयोग करने के लिए कह रहा है: कोई नहीं और प्रदर्शन: ब्लॉक, लेकिन यह किसी के लिए मदद नहीं करता है जो दृश्यता संपत्ति का उपयोग करके सामग्री को दिखाने और छिपाने के लिए सीएसएस संक्रमण का उपयोग करने की कोशिश कर रहा है।

यह भी मुझे पागल कर दिया, क्योंकि प्रदर्शन किसी भी सीएसएस संक्रमण को मारता है।

दृश्यता का उपयोग करने वाले वर्ग में इसे जोड़ने के लिए एक समाधान है:

overflow:hidden

इसके लिए काम करना लेआउट पर निर्भर करता है, लेकिन इसे जिस डिव्यू में रहता है उसके भीतर खाली कंटेंट को रखना चाहिए।

Comments

यदि आप दृश्यता के साथ खेलते हैं: छिपी हुई और दृश्यता: दृश्यमान और आपके तत्व की स्थिति निर्धारित करें: निश्चित करें कि आपको वह समस्या नहीं होगी, यह जादू की तरह है

— जॉन बल्विन एरियस

Answer 6

प्रदर्शन: कोई भी समाधान नहीं है, यह पूरी तरह से अपने स्थान के साथ तत्वों को छुपाता है।

display:noneऔर के बारे में कहानीvisibility: hidden

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

display:noneका मतलब है पूरी तरह से अपने स्थान के साथ तत्वों को छुपाता है। (हालांकि आप अभी भी डोम के माध्यम से इसके साथ बातचीत कर सकते हैं)

Answer 7

display:noneछिपाने के लिए और display:blockदिखाने के लिए सेट करें।

Comments

वह इसे नेत्रहीन रूप से हटाने के बारे में पूछता है, "जैसे कि वे डोम में नहीं हैं"। वास्तविक डोम से उन्हें हटाने के बारे में नहीं।

— सिस्तेद अरवे

प्रश्न राज्यों को केवल उन्हें गायब करने के लिए DOM से हटाने के लिए नहीं है। as though they are not in the DOM at all (but without actually removing them from the DOM)

— मौरो

@pranay: visibility: hiddenकेवल सामग्री के प्रदर्शन को रोकता है लेकिन फिर भी ऊर्ध्वाधर / क्षैतिज स्थान का उपयोग करता है, प्रदर्शन: कोई भी तत्व के लिए ऊर्ध्वाधर / क्षैतिज स्थान को नहीं निकालता है।

— मौरो

नहीं, यह नहीं है। दृश्यता: छिपी हुई; तत्व को अदृश्य बनाता है, लेकिन यह अभी भी जगह लेता है। कुछ भी डिस्प्ले मत करो; दस्तावेज़ को ऐसा व्यवहार करता है जैसे कि वह कभी था ही नहीं।

— ऑली हॉजसन

इस उत्तर को तब हटाएं।

— बालुसक

Answer 8

टॉगलिंग displayसीएसएस संक्रमण को सुचारू करने की अनुमति नहीं देता है। इसके बजाय दोनों visibilityऔर टॉगल करें max-height।

visibility: hidden;
max-height: 0;

Comments

यह उपयोगी है जब आप एनिमेशन के साथ काम कर रहे हैं। क्योंकि हम दृश्य क्षेत्र के बाहर तत्व को कुछ इस तरह से छिपा रहे हैं transform: translateX(-100%)। हम नहीं चाहते हैंdisplay: none

— zhuhang.jasper

Answer 9

यहां एक अलग प्रदर्शन के बाद उन्हें वापस रखना है: कोई नहीं। प्रदर्शन का उपयोग न करें: ब्लॉक / इनलाइन आदि इसके बजाय (यदि जावास्क्रिप्ट का उपयोग करके) सीएसएस संपत्ति प्रदर्शन को '' पर सेट करें (यानी रिक्त)

Answer 10

$('#abc').css({"display":"none"});

यह सामग्री को छुपाता है और खाली स्थान भी नहीं छोड़ता है।

Answer 11

मेरे ज्ञान के ऊपर यह 4 तरीकों से संभव है

1. एचटीएमएल<button style="display:none;"></button>
2. सीएसएस #buttonId{ display:none; }
3. jQuery $('#buttonId').prop('display':'none');और $("#buttonId").css('opacity', 0);

Answer 12

प्रदर्शन: कोई भी पृष्ठ पर सफेद जगह से बचने के लिए सबसे अच्छी बात नहीं है

Comments

लगता है कि अन्य उत्तरों का सिर्फ एक दोहराव है।

— पांग

Answer 13

!importantयदि आप मौजूदा CSS शैलियों को ओवरराइड करने के लिए मजबूर हैं तो उपयोग करें ।

display: none !important;