কীভাবে জাভাস্ক্রিপ্টের মাধ্যমে একটি ডিআইভি দৃশ্যমান এবং অদৃশ্য করা যায়

Question

আপনি কি কিছু করতে পারেন

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

Comments

কেন শুধু জ্যাকুরি ব্যবহার করবেন না? .হাইড ()?

— কোড্রামামা

আমি কি ডিভের নামের জন্য এটি ব্যবহার করব, সুতরাং ডিভটি যদি পরীক্ষার নাম দেওয়া হয়, তবে আমি করতাম test.hide()?

@ জ্যাকস্টোন: না, কেবলমাত্র যদি আপনি ইতিমধ্যে jQuery লাইব্রেরি ব্যবহার করছেন। কিছু লোক কেবল প্রতিটি জাভাস্ক্রিপ্ট প্রশ্নেই এটি প্রচার করতে পছন্দ করে। আপনি .hide()থাকলেও দৃশ্যমানতা সেট করবেন না। এটি প্রদর্শন সেট করে।

@ আমি নই যে আপনি স্পষ্টভাবে বুঝতে ব্যর্থ হয়েছেন যে jQuery সত্যিই দুর্দান্ত এবং সব কিছু করে। (চিত্র উত্স)

— পেক্কা

এর মতো কোনও কিছুর জন্য একটি উত্তরের উত্তম একটি সাধারণ জেএস সমাধান এবং একটি লাইব্রেরি ব্যবহারের সুবিধা দেখানো উভয়ই থাকা উচিত - এই ক্ষেত্রে কোনও উপাদান দেখানোর সময় ইনলাইন বনাম ব্লককে মোকাবেলা করতে হবে না display।

— থিফমাস্টার

Answer 1

যদি [ডিআইভি] তখন একটি উপাদান

[DIV].style.visibility='visible'

অথবা

[DIV].style.visibility='hidden' 

Comments

visibilityপার্শ্ব প্রতিক্রিয়া আছে যে উপাদান দ্বারা দখল স্থান সংরক্ষিত আছে। ওপি যা চায় তা হতে পারে বা নাও হতে পারে

— পেকেকা

যেখানে [ডিআইভি] বলছে সেই জায়গায়, আমি আমার ডিভের নামটি টাইপ করব?

না, এর document.getElementById('id-of-the-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ডিভটি বাস্তবে এখনও সেখানে থাকবে, তবে "সমস্ত খালি" বা "সমস্ত সাদা" হবে

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

আমি আপনার উত্তরটিকে অগ্রাধিকার দিচ্ছি তবে অনুমান করছি যে আপনাকে কিছুটা সংশোধন করতে হবে আপনাকে elem.style.display = 'काहीही নয়' ব্যবহার করতে হবে;

— সওমিল

কখনও কখনও কোনও উপাদান দেখানোর জন্য একটি খালি স্ট্রিং বরাদ্দ করা গ্রহণযোগ্য ।

— বাসিলিভস

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 = falseক্রোমে আমার পক্ষে কাজ করে না। এবং trueঅংশটি দুর্ঘটনাক্রমে আরও বেশি কাজ করছে বলে মনে হচ্ছে কারণ এটি সম্পত্তিটি আনসেট করে (যদিও আমার নিচে নয়)

— পেক্কা

আমরাও displayনা visibilityবুলিয়ান সম্পত্তি। এগুলি ছাড়াও, noneএবং blockসেগুলি স্ট্রিং হওয়ার কারণে উদ্ধৃত করা প্রয়োজন ..

— থিফমাস্টার

লেবেলের জন্য ভুল মান। যারা এখন কাজ করে এবং না আমি এটিকে ঘৃণা করব না, এটি খুব সরল।

— জেলিও

Answer 4

আপনি ডোম ফাংশনগুলি ব্যবহার করতে পারেন: সেটঅ্যাট্রিবিউট এবং রিমুভ অ্যাট্রিবিউট। নীচের লিঙ্কে এগুলি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ রয়েছে।

অ্যাট্রিবিউট এবং অপসারণএট্রিবিউট ফাংশনগুলি সেট করুন

একটি দ্রুত দর্শন:

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

Comments

আপনি কি আপনার উত্তর বাড়িয়ে তুলতে পারেন? উদাহরণ এবং ব্যাখ্যা সহ।

— গাল বারবিন

Answer 5

আপনি opacityযা সদৃশ তা ব্যবহার করতে পারেন visibility তবে উচ্চতর মতো অন্যান্য পরামিতিগুলি নিয়ন্ত্রণের অনুমতি এবং নিয়ন্ত্রণের জন্য অনুমতি দিন (স্নিপেটের সরলতার জন্য আমি এইচটিএমএলে সরাসরি জেএস লজিক রেখেছি - এটি প্রোডাকশন কোডে করবেন না)

.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

সিএসএস ব্যবহার করে অদৃশ্য করুন

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

জাভাস্ক্রিপ্ট ব্যবহার করে দৃশ্যমান করুন

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