जावास्क्रिप्ट के साथ एक DIV दृश्यमान और अदृश्य कैसे बनाया जाए

Question

क्या आप ऐसा कुछ कर सकते हैं

function showDiv()
{
    [DIV].visible = true;
    //or something
}

Comments

क्यों नहीं सिर्फ Jquery का उपयोग करें? ।छिपाना() ?

— कोडरमा

क्या मैं डिव के नाम का उपयोग करूंगा, इसलिए यदि डिव का नाम टेस्ट है, तो मैं करूंगा test.hide()?

@JackStone: नहीं, यह केवल तभी है यदि आप पहले से ही jQuery लाइब्रेरी का उपयोग कर रहे हैं। कुछ लोग हर जावास्क्रिप्ट प्रश्न पर इसे बढ़ावा देना पसंद करते हैं। यहां तक ​​कि अगर तुम थे, .hide()दृश्यता सेट नहीं है। यह डिस्प्ले सेट करता है।

@ मैं नहीं हूँ आप स्पष्ट रूप से यह समझने में विफल रहे हैं कि jQuery वास्तव में महान है और सभी चीजें करता है। (छवि स्रोत)

— पेका

यह एक अच्छा जवाब को शामिल करना चाहिए दोनों एक सादे जे एस समाधान और एक दिखा की तरह कुछ के लिए लाभ इस मामले में, नहीं से निपटने के लिए होने - एक पुस्तकालय का उपयोग करने का ब्लॉक बनाम इनलाइन का उपयोग करते समय displayएक तत्व को दिखाने के लिए।

— ThiefMaster

Answer 1

यदि [DIV] एक तत्व है

[DIV].style.visibility='visible'

या

[DIV].style.visibility='hidden' 

Comments

visibilityसाइड इफेक्ट है कि तत्व द्वारा कब्जा कर लिया स्थान आरक्षित रहता है। हो सकता है कि ओपी चाहता है या नहीं हो सकता है

— Pekka

उस स्थान पर जहां यह कहता है [DIV], मैं अपने div का नाम सही लिखूंगा?

नहीं, document.getElementById('id-of-the-div')इसके बजाय का उपयोग करें[DIV]

— ThiefMaster

@JackStone: यह इस बात पर निर्भर करता है कि आप अपने डिव के "नाम" से क्या मतलब रखते हैं। यदि यह एक चर है जो div को संदर्भित कर रहा है, तो हाँ।

तो अगर मेरा div नाम होता testdiv, तो वह होता document.getElementById('testdiv').style.visibility = 'hidden';?

Answer 2

मान लेते हैं कि आप jQuery जैसे किसी पुस्तकालय का उपयोग नहीं करते हैं।

यदि आपके पास पहले से डोम तत्व का संदर्भ नहीं है, तो एक का उपयोग करें var elem = document.getElementById('id');

फिर आप उस तत्व की कोई भी सीएसएस संपत्ति सेट कर सकते हैं। दिखाने / छिपाने के लिए, आप दो गुणों का उपयोग कर सकते हैं: displayऔर visibility, जिनके प्रभाव थोड़े अलग हैं:

समायोजन style.displayऐसा लगेगा जैसे तत्व बिल्कुल भी मौजूद नहीं है ("हटा दिया गया")।

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

या style.visibilityवास्तव में वहाँ अभी भी div बना देगा, लेकिन "सभी खाली" या "सभी सफेद" होंगे

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

---

यदि आप jQuery का उपयोग कर रहे हैं, तो आप इसे और भी आसान कर सकते हैं जब तक आप displayसंपत्ति सेट करना चाहते हैं:

$(elem).hide();
$(elem).show();

यह स्वचालित रूप से उचित displayमूल्य का उपयोग करेगा ; आपको तत्व प्रकार (इनलाइन या ब्लॉक) के बारे में परवाह नहीं है। साथ ही, elemकेवल एक डोम तत्व लेकिन यह भी एक चयनकर्ता जैसे नहीं हो सकता #idया .classया कुछ और वैध CSS3 है कि (और अधिक!)।

Comments

मैं आपके उत्तर को पसंद करता हूं, लेकिन मुझे लगता है कि आपको थोड़ा सुधार करना है।

— सौमिल 25'14

कभी-कभी किसी तत्व को दिखाने के लिए खाली स्ट्रिंग निर्दिष्ट करना स्वीकार्य होता है ।

— बसिलेव्स

Answer 3

आप उपयोग कर सकते हैं visibilityया displayआपको div.styleऑब्जेक्ट में परिवर्तन लागू करने होंगे, न कि divऑब्जेक्ट को ही।

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

Comments

div.style.visibility = falseChrome में मेरे लिए काम नहीं करता है। और trueहिस्सा है क्योंकि यह संपत्ति (नहीं मेरी downvote हालांकि) unsets दुर्घटना से अधिक काम कर रहा है

— पेका

न तो displayहै और न ही visibilityबूलियन गुण हैं। इसके अलावा, noneऔर blockउद्धृत करने की आवश्यकता है क्योंकि वे तार हैं ..

— ThiefMaster

लेबल के लिए गलत मान। वे काम अब और नहीं, मैं इसे फील नहीं करने जा रहा हूं, यह बहुत सरल है।

— ज़ेलियो

Answer 4

आप DOM फ़ंक्शंस का उपयोग कर सकते हैं: setAttribute और removeAttribute। निम्नलिखित लिंक में आपके पास उनका उपयोग करने के तरीके का एक उदाहरण है।

सेट करें और हटाएं

एक त्वरित दृश्य:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

Comments

क्या आप अपना उत्तर बढ़ा सकते हैं? उदाहरण और स्पष्टीकरण के साथ।

— गाल बारबिन

Answer 5

आप उपयोग कर सकते हैं opacityजो समान है, visibility लेकिन संक्रमण को सुचारू करने और ऊंचाई जैसे अन्य मापदंडों को नियंत्रित करने की अनुमति देता है (स्निपेट सादगी के लिए मैंने सीधे HTML में js तर्क दिया - इसे उत्पादन कोड में न करें)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Answer 6

DOM तत्व के 'हिडन' विशेषता का उपयोग करें:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

Answer 7

CSS का उपयोग करके अदृश्य बनाएं

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

जावास्क्रिप्ट का उपयोग करके दृश्यमान बनाएं

document.getElementById('div_id').style.visibility = 'visible';