আপনি কীভাবে একটি লুকানো ডিভি তৈরি করবেন যা কোনও লাইন ব্রেক বা অনুভূমিক স্থান তৈরি করে না?

Question

আমি একটি লুকানো চেকবক্স রাখতে চাই যা স্ক্রিনে কোনও স্থান নেয় না।

আমার যদি এটি থাকে:

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

আমি চেকবক্সটি দেখতে পাচ্ছি না তবে এটি এখনও একটি নতুন লাইন তৈরি করে।

আমার যদি এটি থাকে:

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

এটি আর একটি নতুন লাইন তৈরি করে না, তবে এটি স্ক্রিনে অনুভূমিক স্থান গ্রহণ করে।

কোনও গোপন ডিভ থাকার কোনও উপায় আছে যা কোনও ঘর নেয় না (উল্লম্ব বা অনুভূমিক?

Comments

এরকম ডিভের কি কোনও ব্যবহার আছে?

— জোনো_এফটিডব্লিউ

@ জন্নো: এটি সাধারণত অ্যাজেএক্স-এ ব্যবহৃত হয়। বলুন আপনার কাছে প্রকাশের ত্রিভুজ সহ আইটেমের একটি তালিকা রয়েছে। ব্যবহারকারী প্রকাশের ত্রিভুজটি ক্লিক করলে আপনি বিশদ বা একটি সাবট্রি উপস্থিত হতে চান। সুতরাং আপনি যা করছেন সেখানে <ডিআইডি আইডি = "এআইডিডি" শৈলী = "প্রদর্শন: কিছুই নয়;"> বিশদটি কোথায় যাওয়া উচিত। তারপরে, যখন ব্যবহারকারীটি ত্রিভুজটি ক্লিক করে, আপনি ত্রিভুজটিকে একটি "অর্ধদ্বীপ" অবস্থানে (দক্ষিণ-পূর্ব দিকে নির্দেশিত) সরিয়ে নিয়ে যান এবং <ডিভিটি> পূরণ করার জন্য একটি এজেএক্স অনুরোধ বন্ধ করবেন। যখন এজেএক্স অনুরোধটি শেষ হয়, আপনি ত্রিভুজটি দক্ষিণে ঘুরিয়ে "প্রদর্শন: কিছুই নয়" সরিয়ে ফেলুন; <ডিভ> এর স্টাইল থেকে। স্ক্রিপ্ট.একুলো.আস লাইব্রেরি এটি অনেক কিছু করে।

— মাইক ডিসিমোন

Answer 1

ব্যবহার display:none;

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

• visibility: hidden উপাদানটি গোপন করে, তবে এটি লেআউটে স্থান নেয় up

• display: none ডকুমেন্ট থেকে উপাদানটি পুরোপুরি সরিয়ে দেয়, এটি কোনও স্থান গ্রহণ করে না।

Comments

আবার <div id="divCheckbox" style="display: inline-block;">

— ডিভটি

@ আনুজন: কেন inline-block? displayডিভের জন্য ডিফল্ট মান block!

— এমএমএম

বিপরীত উপায় আছে? থেকে একটি div পরিবর্তন করতে display: noneকরতে display: inline-blockএখন প্রদর্শিত DIV আছে স্থান গ্রহণ এবং প্রায় আমার অন্যান্য DOM উপাদানে চলন্ত ছাড়া বা সমমানের?

— বিপ্রোমাস

এইচটিএমএল 5.1 থেকে পাওয়া গ্লোবাল এইচটিএমএল অ্যাট্রিবিউট লুকানো অন্তর্ভুক্ত করার জন্য উত্তরটি আপডেট করার উপযুক্ত হতে পারে যা মূলত এইচটিএমএল থেকে সরাসরি বলা হিসাবে একই । তবে সম্পত্তিটির কোনও ব্যবহার বৈশ্বিক বৈশিষ্ট্যের আচরণকে ওভাররাইড করে । display: nonedisplayhidden

— মারিয়াস মুসনিকু

Answer 2

এইচটিএমএল 5 প্রকাশের ফলে এখন কেউ এগুলি করতে পারে:

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

দ্রষ্টব্য: এটি কয়েকটি পুরানো ব্রাউজার দ্বারা সমর্থিত নয় , উল্লেখযোগ্যভাবে আইই <11।

লুকানো অ্যাট্রিবিউট ডকুমেন্টেশন ( MDN , W3C )

Comments

এটি সিএসএসের সাথে লুকানোর চেয়ে শব্দার্থগতভাবে সঠিক, এটি অ্যাক্সেসযোগ্যতার জন্য আরও ভাল এবং এটি সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। এটি 2020

— রবিন ম্যাট্রাল

Answer 3

ব্যবহার style="display: none;"। এছাড়াও, আপনার সম্ভবত ডিআইভি থাকার দরকার নেই, কেবল display: noneচেকবক্সে স্টাইল স্থাপন করা যথেষ্ট যথেষ্ট।

Comments

পৃষ্ঠার লোডটিতে আমাকে সতর্কতা লুকিয়ে রাখতে হবে এবং বোতাম ক্লিকের উপর এটি আবার দেখাতে চেয়েছিল। চেষ্টা করেছেন visibility: hiddenকিন্তু তা খালি জায়গা দেখাচ্ছে। style="display: none;"সামান্য কবিতার মতো কাজ করেছেন :)

— sohaiby

Answer 4

সিএমএস´ উত্তর ছাড়াও আপনি স্টাইলটি বাহ্যিক স্টাইলশিটে রাখার বিষয়টি বিবেচনা করতে এবং স্টাইলটি আইডিতে নির্ধারণ করতে চাইতে পারেন:

#divCheckbox {
display: none;
}

Comments

+1, এটি সত্যিই একটি ভাল পরামর্শ, তবে অন্য সমস্ত চেকবক্সের দৃশ্যমানতা প্রভাবিত না করে কীভাবে কেবল একটি চেকবক্স প্রদর্শন করবেন?

— ওয়েস কুরেশি

@ ডটনেটসোলজিয়ার পুরানো প্রশ্ন তবে এখানে একটি উত্তর থাকা উচিত। আপনার ইনভিস নামে একটি সিএসএস ক্লাস রয়েছে এবং আপনি এটি চেকবাক্স থেকে যোগ / সরিয়ে জেএস ব্যবহার করে আইডি দ্বারা ডিভ করেন।

— ড্যানিয়েলস্ট

Answer 5

যেহেতু আপনার সিএসএসে ব্যবহারযোগ্যতা এবং সাধারণতার উপর ফোকাস করা উচিত, কোনও নির্দিষ্ট বিন্যাস উপাদানটির (যা বিশাল বা একাধিক সিএসএস ফাইলের ফলস্বরূপ) এর দিকে ইঙ্গিত করার জন্য কোনও আইডি ব্যবহার না করে আপনার পরিবর্তে আপনার লিঙ্কযুক্ত সিএসএস ফাইলটিতে একটি সত্য শ্রেণি ব্যবহার করা উচিত:

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

বা মিনিমালিস্টের জন্য:

.hidden {
display: none;
}

এখন আপনি কেবল এটির মাধ্যমে প্রয়োগ করতে পারেন:

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

Comments

কোড এইভাবে অনেক ক্লিনার দেখায়! আমি ইনলাইন শৈলীতে ওভার ক্লাস করা পছন্দ করি

— হ্যারি চো

Answer 6

<span>বিন্যাস না ভেঙে স্টাইল করার জন্য মার্কআপের ছোট ছোট অংশগুলিকে আলাদা করার জন্য বিবেচনা করুন । এটি <div>নিজেকে প্রদর্শন না করার জন্য জোর করার চেষ্টা করার চেয়ে এটি আরও মূর্খ বলে মনে হচ্ছে - যদি সত্যিকার অর্থে চেকবক্সটি আপনার পছন্দ মতো স্টাইল করা যায় না।

Answer 7

মাউস ক্লিক করে দেখান / আড়াল করুন:

<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>

সূত্র: এখানে

Answer 8

কোন স্থান গ্রহণ থেকে চেকবক্সটি প্রতিরোধ করার জন্য ছাড়া করে DOM, ব্যবহার থেকে এটি সরানোর hidden।

<div hidden id="divCheckbox">

চেকবক্সটি কোনও স্থান গ্রহণ এবং এটি ডিওএম থেকে অপসারণ থেকে বিরত রাখতে , ব্যবহার করুন display: none।

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

Answer 9

উপাদানটি দৃশ্যমানভাবে আড়াল করতে , তবে এটি এইচটিএমএল এ রাখুন, আপনি ব্যবহার করতে পারেন:

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

অথবা

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

কি ভুল হতে পারে display:none? এটি এইচটিএমএল থেকে উপাদানটি পুরোপুরি সরিয়ে দেয়, তাই লুকানো উপাদানটিতে কোনও কিছু অ্যাক্সেস করার প্রয়োজন হলে কিছু কার্যকারিতা ভঙ্গ হতে পারে।

Answer 10

display: none;

এটি উপাদানটি অদৃশ্য হয়ে যায় এবং কোনও স্থান না নেয় should

Comments

আমার উত্তরের ফর্ম্যাটিংয়ে মন্তব্য করা লোকদের ধন্যবাদ জানাই।

— হোসে লুইস রাসমুসেন গার্সিয়া