आप एक छिपा हुआ तलाक कैसे बनाते हैं जो लाइन ब्रेक या क्षैतिज स्थान नहीं बनाता है?

354

मैं एक छिपा हुआ चेकबॉक्स रखना चाहता हूं जो स्क्रीन पर कोई स्थान नहीं लेता है।

अगर मेरे पास यह है:

<div id="divCheckbox" style="visibility: hidden">

मुझे चेकबॉक्स दिखाई नहीं देता है, लेकिन यह अभी भी एक नई लाइन बनाता है।

अगर मेरे पास यह है:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

यह अब एक नई रेखा नहीं बनाता है, लेकिन यह स्क्रीन पर क्षैतिज स्थान लेता है।

वहाँ एक छिपा हुआ है कि वहाँ कोई जगह नहीं लेता है एक रास्ता है (ऊर्ध्वाधर या क्षैतिज?

html hidden

— Leora
स्रोत

क्या इस तरह के डिव का कोई उपयोग है?

— जोनो_एफटीडब्ल्यू

6

@ जोनो: यह आमतौर पर AJAX में उपयोग किया जाता है। मान लें कि आपके पास प्रकटीकरण त्रिकोण वाली वस्तुओं की सूची है। आप विवरण या एक सबट्री चाहते हैं, जब उपयोगकर्ता प्रकटीकरण त्रिकोण पर क्लिक करता है। तो आप क्या करते हैं एक <div id = "theID" शैली = "प्रदर्शन: कोई नहीं;"> जहां विवरण जाना चाहिए। फिर, जब उपयोगकर्ता त्रिकोण पर क्लिक करता है, तो आप त्रिकोण को "आधा" स्थिति (दक्षिण-पूर्व की ओर इशारा करते हुए) में ले जाते हैं और <div> में भरने के लिए एक AJAX अनुरोध को बंद कर देते हैं। जब AJAX अनुरोध पूरा हो जाता है, तो आप त्रिकोण को दक्षिण की ओर मोड़ते हैं और "प्रदर्शन: कोई नहीं;" <div> की शैली से। Script.aculo.us लाइब्रेरी बहुत कुछ करती है।

— माइक डीसिमोन

715

उपयोग display:none;

<div id="divCheckbox" style="display: none;">

visibility: hidden तत्व छुपाता है, लेकिन यह अभी भी लेआउट में जगह लेता है।
display: none तत्व को दस्तावेज़ से पूरी तरह से हटा देता है, यह कोई स्थान नहीं लेता है।

— सीएमएस
स्रोत

42

फिर से दिखाने के लिए (जैसे किसी को भी मेरी जरूरत थी) -<div id="divCheckbox" style="display: inline-block;">

— अनुज

14

@anujin: क्यों inline-block? displayडिव के लिए डिफ़ॉल्ट मान है block!

— एमएमएम

क्या इसके विपरीत करने का कोई तरीका है? अब प्रदर्शित डिव स्पेस को उठाए बिना और मेरे अन्य DOM तत्वों को इधर-उधर किए बिना किसी डिव display: noneको display: inline-blockया समतुल्य से बराबर में बदलना ?

— bpromas

1

जवाब को अद्यतन करने के वैश्विक एचटीएमएल विशेषता शामिल करने के लिए लायक हो सकता है छिपा हुआ जो बाद से उपलब्ध है HTML5.1 जो मूल रूप से यह कहते हुए एक ही है display: noneHTML से हालांकि सीधे। हालाँकि displayसंपत्ति का कोई भी उपयोग hiddenवैश्विक विशेषता के व्यवहार को ओवरराइड करता है ।

— मारियस म्यूकेनिकु

54

एचटीएमएल 5 के रिलीज के बाद से अब बस कर सकते हैं:

<div hidden>This div is hidden</div>

नोट: यह कुछ पुराने ब्राउज़रों द्वारा समर्थित नहीं है, विशेष रूप से IE <11।

छिपे हुए गुण प्रलेखन ( MDN , W3C )

— C_B
स्रोत

1

यह सीएसएस के साथ छिपने की तुलना में अधिक अर्थपूर्ण रूप से सही है, यह पहुंच के लिए बेहतर है, और यह सभी प्रमुख ब्राउज़रों द्वारा समर्थित है। यह 2020 में स्वीकृत उत्तर होना चाहिए।

— रॉबिन मेट्रल

29

का उपयोग करें style="display: none;"। इसके अलावा, आपको शायद DIV की आवश्यकता नहीं है, बस स्टाइल को display: noneचेकबॉक्स पर सेट करना संभवतः पर्याप्त होगा।

— tvanfosson
स्रोत

मुझे पेज लोड पर मुझे सतर्क संदेश छिपाने की जरूरत है और इसे बटन पर फिर से दिखाना चाहता हूं। कोशिश की visibility: hiddenलेकिन वह खाली जगह दिखा रहा था। style="display: none;"थोड़ा आकर्षण की तरह काम किया :)

— sohaiby

8

CMS addition उत्तर के अलावा आप स्टाइल को बाहरी स्टाइलशीट में रखने पर विचार कर सकते हैं और इस तरह स्टाइल को आइडी को सौंप सकते हैं:

#divCheckbox {
display: none;
}

— जीटा टू
स्रोत

+1, यह वास्तव में एक अच्छा सुझाव है, लेकिन अन्य सभी चेकबॉक्स दृश्यता को प्रभावित किए बिना केवल एक चेकबॉक्स कैसे दिखाएं?

— ओवैस कुरैशी

1

@dotNetSoldier पुराना सवाल है लेकिन यहां एक जवाब होना चाहिए। आपके पास इनविस नामक एक सीएसएस क्लास है और आप इसे जेएस का उपयोग करके चेकबॉक्स या डिव से जोड़ / हटा सकते हैं।

— डैनियल

8

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

.hidden {
visibility: hidden;
display: none;
}

या न्यूनतम के लिए:

.hidden {
display: none;
}

अब आप बस के माध्यम से इसे लागू कर सकते हैं:

<div class="hidden"> content </div>

— डेव
स्रोत

कोड इस तरह से बहुत साफ दिखता है! मैं इनलाइन शैली में एक वर्ग से अधिक पसंद करता हूं

— हैरी चो

5

<span>लेआउट को तोड़ने के बिना स्टाइलअप के छोटे खंडों को अलग करने के लिए उपयोग करने पर विचार करें । यह <div>खुद को प्रदर्शित न करने के लिए मजबूर करने की कोशिश करने की तुलना में अधिक मुहावरेदार प्रतीत होगा - यदि वास्तव में चेकबॉक्स खुद को उस तरह से स्टाइल नहीं कर सकता है जैसा आप चाहते हैं।

— अमीर चर्चर
स्रोत

4

माउस क्लिक द्वारा दिखाएँ / छुपाएँ:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

स्रोत: यहाँ

— महदी जैजिनी
स्रोत

4

किसी भी स्थान को DOM से हटाए बिना चेकबॉक्स को रोकने के लिए , उपयोग करें hidden।

<div hidden id="divCheckbox">

चेकबॉक्स को किसी भी स्थान को लेने से रोकने के लिए और इसे DOM से हटाने के लिए भी उपयोग करें display: none।

<div id="divCheckbox" style="display:none">

— smac89
स्रोत

3

तत्व को नेत्रहीन रूप से छिपाने के लिए , लेकिन इसे html में रखें, आप इसका उपयोग कर सकते हैं:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

या

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

क्या गलत हो सकता है display:none? यह html से तत्व को पूरी तरह से हटा देता है, इसलिए कुछ कार्यात्मकताओं को तोड़ा जा सकता है यदि उन्हें छिपे हुए तत्व में कुछ का उपयोग करने की आवश्यकता होती है।

— THN
स्रोत

0

display: none;

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

इससे तत्व गायब हो जाना चाहिए और कोई स्थान नहीं लेना चाहिए।

— जोस लुइस रासमुसेन गार्सिया
स्रोत

मेरे जवाब के प्रारूपण पर टिप्पणी करने वाले लोगों को धन्यवाद।

— जोस लुइस रासमुसेन गार्सिया