প্রদর্শনের বিপরীত আছে: কিছুই না?

Question

বিপরীত visibility: hiddenহয় visibility: visible। একইভাবে, কোন বিপরীত আছে display: none?

সম্পত্তি display: noneব্যবহার করার মতো পরিষ্কার নয় বলে অনেক লোক বিভ্রান্ত হয়ে পড়েন যে কোনও উপাদান থাকা অবস্থায় কীভাবে প্রদর্শন করবেন visibility।

আমি কেবল visibility: hiddenপরিবর্তে ব্যবহার করতে পারি display: none, তবে এটি একই প্রভাব দেয় না, তাই আমি এটি নিয়ে যাচ্ছি না।

Comments

কেন এটি ডাউন-ভোট এবং নিকটতম অনুরোধগুলি পাচ্ছে তা নিশ্চিত নয়। এটি অন টপিক (স্ট্যাক ওভারফ্লোতে বর্তমানে 143,368 টি সিএসএস প্রশ্ন রয়েছে), এটি একটি আসল-ওয়ার্ল্ড ইস্যু এবং লোকেরা সঠিকভাবে ভাষা শিখতে সহায়তা করার জন্য এটি একটি ভাল প্রশ্ন।

— পল ডি ওয়েট

@ পল সম্ভবত লোকেরা এটিকে একটি স্ব-উত্তর বলে মনে করতে পারেনি এবং ভেবেছিলেন এটি একটি নিখরচায় গবেষণা প্রচেষ্টা ছিল (কারণ সমস্ত গবেষণামূলক প্রচেষ্টা

— উত্তরেই রয়েছে

যদি আপনার উত্তরটি ডাব্লু 3 স্কুল থেকে ডেস্কটপ করুন / পোস্ট করুন, তবে কোনও প্রশ্ন জিজ্ঞাসা করছেন কেন ?

— বিল

@ রিচার্ডটিঙ্গল: আহ, ভালো কথা। @ মোহাম্মদআরীবসিদ্দিক: ওহ, আপনার উত্তর মুছে ফেলা দরকার বলে আমি ভাবিনি। সমস্ত সম্ভাব্য displayমানগুলির বৃহত তালিকাটি সরিয়ে ফেলা ভাল। (এবং এটি অবশ্যই আমার মতামত: সম্ভবত লোকেরা সেই তালিকাটি সেখানে উপস্থিত থাকতেই পছন্দ করেছে))

— পল ডি ওয়েট

ইলিয়া স্ট্রেলটসিনের উত্তরকে সত্যই সত্যই আপনার উত্তর দেওয়া উচিত ছিল। ইলিয়া প্রদর্শনের একটি "সংস্করণ" দেয়: যার বিপরীতে কোনওটিই হয় না, যা আপনার প্রশ্নের অন্তর্নিহিত ব্যবহারিক সমস্যাটি সমাধান করে, যখন আপনি যে উত্তরটি গ্রহণ করতে পছন্দ করেছেন, সংক্ষেপে, কেবল "না" বলে। যা নিশ্চিত সত্য, কিন্তু অনেক অনেক কম সহায়ক। এটি প্রোগ্রামারদের জন্য, ভাষাবিদদের পক্ষে নয়।

— ম্যাথহেডিনক্লাউডস

Answer 1

display: noneএর মতো আক্ষরিক বিপরীত কিছু visibility:hiddenনেই।

visibilityসম্পত্তি একটি উপাদান দৃশ্যমান বা না কিনা সিদ্ধান্ত নেয়। সুতরাং এটির দুটি রাষ্ট্র ( visibleএবং hidden) রয়েছে যা একে অপরের বিপরীতে।

displayসম্পত্তি, কিন্তু, কি সিদ্ধান্ত নেয় বিন্যাস নিয়ম একটি উপাদান অনুসরণ করা হবে। কিভাবে উপাদানের নিজেদের CSS এ খুঁজে রাখা হবে নিয়ম বিভিন্ন ধরণের আছে, তাই বিভিন্ন মান ( block, inline, inline-blockইত্যাদি - এই মান এখানে ডকুমেন্টেশান দেখুন )।

display:none পৃষ্ঠার বিন্যাস থেকে সম্পূর্ণরূপে কোনও উপাদান সরিয়ে দেয়, মনে হয় এটি সেখানে নেই।

অন্যান্য সমস্ত মান displayউপাদানটিকে পৃষ্ঠার অংশ হিসাবে কারণ হিসাবে বোঝায়, সেগুলি সমস্ত ক্ষেত্রে বিপরীত display:none।

তবে এর সরাসরি মূল্যবোধের একটিও মূল্য নেই display:none- যেমন "টাক" এর বিপরীতে কোনও চুলের স্টাইল নেই।

Comments

আমি লক্ষ্য করেছি আপনি display: initialমুছে ফেলা স্ব-উত্তরে উল্লেখ করেছেন - CSS2.1 প্রয়োগকারী ব্রাউজারগুলির জন্য এটি সমার্থক display: inline। এটি কোনও displayপ্রদত্ত উপাদানটির জন্য ব্রাউজার ডিফল্টে রিসেট হয় না - এটি "প্রাথমিক মান" এর অর্থ তা নয়।

— বোল্টক্লক

'টাক' উদাহরণের জন্য আমার ভোট :) খুব সহজে বোঝার উদাহরণ!

— জেস্পার রেন-জেনসেন

আমি মাধ্যমে পুরো পঠিত আমার স্ব চিন্তা করছি "বড় উদাহরণ, হাঁ, হাঁ, তারা সব বিপরীত display:noneতারপর আপনি পড়তে" সেখানে কোন এক হেয়ার স্টাইল বিপরীত যে শুধু মত " পালকহীন বাহ প্লাস 1, চমত্কারভাবে করা"।

— শেফ_কোড

কোনও hairstyle টাক বিপরীত হয়।

— অ্যাডজুনেক্টপ্রসফেসরফ্যালকন

@ অ্যাডজেক্ট প্রফেসরফ্যালকন: ভাল, ধরনের। আমি বলতে চাই যে এক নম্বরে শেভ করা একটি মাথা একগুচ্ছের তুলনায় টাকের বিপরীতে অনেক কম।

— পল ডি

Answer 2

এর সত্যিকারের বিপরীতটি display: none(এখনও) নেই।

তবে display: unsetখুব কাছাকাছি এবং বেশিরভাগ ক্ষেত্রে কাজ করে।

থেকে MDN (মজিলা ডেভেলপার নেটওয়ার্ক):

আনসেট করা সিএসএস কীওয়ার্ডটি প্রাথমিক এবং উত্তরাধিকারী কীওয়ার্ডগুলির সংমিশ্রণ। এই দুটি সিএসএস-বিস্তৃত কীওয়ার্ডগুলির মতো এটি সিএসএস শর্টহ্যান্ড সহ যে কোনও সিএসএস সম্পত্তিতে প্রয়োগ করা যেতে পারে। এই কীওয়ার্ডটি সম্পত্তিটি তার উত্তরাধিকার সূত্রে প্রাপ্ত মান অনুসারে পুনরায় সেট করে যদি এটি তার পিতামাতার কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় বা যদি না হয় তবে তার প্রাথমিক মানতে আসে। অন্য কথায়, এটি প্রথম ক্ষেত্রে উত্তরাধিকারী কীওয়ার্ড এবং দ্বিতীয় ক্ষেত্রে প্রাথমিক কীওয়ার্ডের মতো আচরণ করে।

(উত্স: https://developer.mozilla.org/docs/Web/CSS/unset )

নোট display: revertএটি বর্তমানে বিকাশ করা হচ্ছে। বিশদ জন্য MDN দেখুন ।

Comments

কি হবে display: initial?

— ফ্লিম

Answer 3

displayজাভাস্ক্রিপ্টে উপাদানগুলির পরিবর্তন করার সময় , অনেক ক্ষেত্রে ফলাফল 'পূর্বাবস্থায়' ফেলার উপযুক্ত বিকল্প element.style.display = "none"হয় element.style.display = ""। এটি অপসারণ করেdisplaystyle অ্যাট্রিবিউট থেকে ঘোষণাকে , displayডকুমেন্টের জন্য স্টাইলশীটে সেট করা মানটিতে সম্পত্তির আসল মানটিকে পুনরায় রূপান্তর করে (অন্যত্র নতুন করে সংজ্ঞায়িত না হলে ব্রাউজারের ডিফল্টে)। তবে আরও নির্ভরযোগ্য পদ্ধতির মধ্যে সিএসএসের মতো একটি শ্রেণি রয়েছে

.invisible { display: none; }

এবং / থেকে এই শ্রেণীর নাম যুক্ত / সরানো element.className।

Comments

আপনি যদি ওভাররাইড করতে চান .element { display: none }(উদাহরণস্বরূপ সিএসএস লিবিতে সংজ্ঞায়িত) .element { display: '' !important }এটি কাজ করবে না। আপনার ব্যবহার করতে হবে.element { display: unset !important }

— tanguy_k

আমি display:noneকেবল জাভাস্ক্রিপ্টে "পূর্বাবস্থায় ফেরা" সম্পর্কে বলেছি । অবশ্যই এটি খালি স্ট্রিং সিএসএসে কাজ করবে না কারণ এটি অবৈধ মান। Hovewer, display: unsetআপনার প্রস্তাবিত পুনঃস্থাপন করা হবে না, যেমন, ডিফল্ট display:blockএকটি জন্য <div>অথবা ডিফল্ট display:table-rowএকটি জন্য <tr>, এটা কার্যকরভাবে সবকিছু মধ্যে সক্রিয় display:inline(ঠিক মত display:initial)। উপাদানটির জন্য ব্রাউজারের ডিফল্ট মানটি পুনরুদ্ধার করতে, রয়েছে display:revertতবে এটি ভালভাবে সমর্থিত নয় ( caniuse.com/#feat=css-revers-value )।

— ইলিয়া স্ট্রেলটসিন

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। গৃহীত উত্তরের 'টাকের বিপরীতে' এর সাথে ভাল তুলনা রয়েছে তবে দরিদ্র প্রোগ্রামারকে "টাক তৈরি করা" - "এখন চুল ফেলা" প্রয়োগ করার সাথে মোকাবিলা করার সাথে কিছুই করার নেই। এই উত্তরটি আপনাকে জানায় যে কীভাবে ব্যবহারিক সমস্যাটি মোকাবেলা করতে হবে। এলিমেন্ট.স্টাইল.ডিসপ্লে = '' ত্রুটিযুক্ত প্রবণ, কারণ "পুরানো চুল" ডিফল্ট প্রদর্শন নাও হতে পারে, তবে 'ব্লক' বা 'টেবিল সেল' বা যা কিছু হোক। এখানে ", অদৃশ্য" শ্রেণি সরিয়ে ফেলা, কেবল যতদূর আমি দেখতে পাচ্ছি "এখন চুল পিছিয়ে রাখুন" এর একমাত্র বাগমুক্ত বাস্তবায়ন। সুতরাং, সর্বদা এটি করুন

— ম্যাথহেথইনক্লাউডস

Answer 4

তুমি ব্যবহার করতে পার

display: normal;

এটি স্বাভাবিক হিসাবে কাজ করে .... এটি সিএসএসে একটি ছোট হ্যাকিং;)

Comments

কেন এটাকে বঞ্চিত করা হচ্ছে? এটি কি এটি করার খারাপ উপায় বা না? এটি টেবিলের জন্য ভাল কাজ করে, তবে আমার কি অন্য কিছু ব্যবহার করা উচিত?

— বেনিয়ামিন কার্লগ

'স্বাভাবিক' মানটি displayসম্পত্তিটির জন্য একটি বৈধ মান নয় , সুতরাং এটি কেবল উপেক্ষা করা হয়েছে এবং কার্যকরভাবে element.style.display = ''অ্যাসাইনমেন্টের মতো কাজ করে ( উপরে আমার উত্তর দেখুন )।

— ইলিয়া স্ট্রেলটসিন

সুতরাং অন্য কথায় আপনি display: chunk norris;একই প্রভাবের জন্য আরও কিছুটা কিক ব্যবহার করতে পারতেন ।

— কেভিন বি

আপনি যদি ওভাররাইড করতে চান .element { display: none }(উদাহরণস্বরূপ সিএসএস লিবিতে সংজ্ঞায়িত) .element { display: normal !important }এটি কাজ করবে না। আপনার ব্যবহার করতে হবে.element { display: unset !important }

— tanguy_k

Answer 5

আমি display:block; এটি আমার জন্য কাজ করে

Comments

এটি কেবলমাত্র সেই উপাদানগুলির জন্য কার্যকর যা আপনি প্রদর্শিত হতে চান block, উদাহরণস্বরূপ কোনও inlineউপাদানটির জন্য আপনি সাধারণত এটি চান না <span>।

— ফ্লিম

Answer 6

পল যেমন ব্যাখ্যা করেছেন তেমন কোনও আক্ষরিক বিপরীতে প্রদর্শন নেই: এইচটিএমএল-তে কোনওটিরই আলাদা আলাদা ডিফল্ট প্রদর্শন নেই এবং আপনি ক্লাস বা ইনলাইন স্টাইল ইত্যাদির সাহায্যে ডিসপ্লেও পরিবর্তন করতে পারেন etc.

তবে আপনি যদি jQuery এর মতো কিছু ব্যবহার করেন তবে তাদের শো এবং লুকানোর ক্রিয়াকলাপগুলি এমন আচরণ করে যেহেতু প্রদর্শনের কোনও বিপরীতে নেই। আপনি যখন লুকান এবং তারপরে আবার কোনও উপাদান দেখান, এটি লুকিয়ে রাখার আগে ঠিক ঠিক একইভাবে প্রদর্শিত হবে। তারা উপাদানটি লুকিয়ে রাখার ক্ষেত্রে প্রদর্শন সম্পত্তির পুরানো মান সংরক্ষণ করে তা করে থাকে যাতে আপনি এটি আবার দেখানোর পরে এটি লুকিয়ে রাখার আগে এটি একইভাবে প্রদর্শন করবে। https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

এর অর্থ হ'ল আপনি যদি ইনলাইন, বা ইনলাইন-ব্লক প্রদর্শনের জন্য উদাহরণস্বরূপ একটি ডিভি সেট করেন এবং আপনি এটি লুকিয়ে রাখেন এবং এটি আবার দেখান, এটি আবার একবারের মতো ইনলাইন বা ইনলাইন-ব্লকটি আগের মতো প্রদর্শিত হবে

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

লিপি:

  $('a').click(function(){
        $('div').toggle();
    });

লক্ষ্য করুন যে ডিভের প্রদর্শন বৈশিষ্ট্যটি গোপন করার পরেও প্রদর্শন স্থির থাকবে (প্রদর্শন: কিছুই নয়) এবং আবার প্রদর্শিত হবে।

Comments

"প্রদর্শন: টেবিল-সেল" আমার প্রয়োজন ছিল। অন্য কোনও উত্তরে উল্লেখ করা হয়নি।

— বেন্ডেকো

Answer 7

প্রিন্টারে বন্ধুত্বপূর্ণ স্টাইলশিটের ক্ষেত্রে, আমি নিম্নলিখিতটি ব্যবহার করি:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

যখন আমি মানগুলি সহ কোনও ফর্ম মুদ্রণের প্রয়োজন হয়েছিল এবং ইনপুট ক্ষেত্রগুলি মুদ্রণ করা শক্ত ছিল তখন আমি এটি ব্যবহার করেছি। সুতরাং আমি স্প্যান.প্রিন্ট_অনলি ট্যাগে মোড়ানো মানগুলি যুক্ত করেছি (div.print_only অন্য কোথাও ব্যবহৃত হয়েছিল) এবং তারপরে ইনপুট ক্ষেত্রে .না_প্রিন্ট শ্রেণি প্রয়োগ করা হয়েছে। অন-স্ক্রিনে আপনি ইনপুট ক্ষেত্রগুলি দেখতে পাবেন এবং যখন মুদ্রিত হবে, কেবলমাত্র মানগুলি। আপনি অভিনবতা পেতে চাইলে আপনি ক্ষেত্রগুলি আপডেট করা হলে স্প্যান ট্যাগগুলিতে মানগুলি আপডেট করতে আপনি জেএস ব্যবহার করতে পারেন তবে এটি আমার ক্ষেত্রে প্রয়োজনীয় ছিল না। সম্ভবত সবচেয়ে মার্জিত সমাধান নয় তবে এটি আমার পক্ষে কাজ করেছে!

Answer 8

আপনি প্রদর্শন: ব্লক ব্যবহার করতে পারেন

উদাহরণ:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Answer 9

আমি এমন একটি অ্যাপ্লিকেশন তৈরি করার সময় এই চ্যালেঞ্জের মধ্যে পড়েছিলাম যেখানে আমি নির্দিষ্ট ব্যবহারকারীর জন্য একটি টেবিল গোপন রাখতে চেয়েছিলাম তবে অন্যদের জন্য নয়।

প্রাথমিকভাবে আমি এটি প্রদর্শন হিসাবে সেট আপ করেছি: এর পরে আর কিছুই নয়: আমি যে ব্যবহারকারীদের এটি দেখতে চেয়েছিলাম তাদের জন্য ইনলাইন-ব্লক তবে আপনি যে ফর্ম্যাটিং ইস্যুগুলি আশা করতে পারেন তা অনুভব করেছি (কলামগুলি একীকরণ বা সাধারণত অগোছালো)।

আমি এটির চারপাশে যেভাবে কাজ করেছি তা হ'ল প্রথমে টেবিলটি প্রদর্শন করা এবং তারপরে "প্রদর্শন: কোনওটিই" করা হয়নি যারা আমি এটি দেখতে চাইনি। এইভাবে, এটি সাধারণত ফর্ম্যাট করে তবে প্রয়োজনীয় হিসাবে অদৃশ্য হয়ে যায়।

পার্শ্বীয় সমাধান বিট কিন্তু কারও সাহায্য করতে পারে!

Answer 10

নেটিভ প্রতিক্রিয়া নিয়ে কাজ করার সময় 'কিছুই নয়' এর বিপরীতে 'ফ্লেক্স' হয়।

Answer 11

দৃশ্যমানতা: লুকানো উপাদানটি আড়াল করবে তবে উপাদানটি তাদের ডম সহ। এবং প্রদর্শনের ক্ষেত্রে: এটি কোনওটিই ডিওএম থেকে উপাদানটি সরাবে না।

সুতরাং আপনার কাছে উপাদান লুকানোর বা লুকিয়ে রাখার বিকল্প রয়েছে। তবে একবার আপনি এটি মুছে ফেললে (আমি বোঝাতে চাইছি কিছুই নয়) এর বিপরীত মানটি পরিষ্কার হয় না। ডিসপ্লেতে ডিসপ্লে: ব্লক, ডিসপ্লে: ইনলাইন, ডিসপ্লে: ইনলাইন-ব্লক এবং অন্যান্য অনেকগুলি মান রয়েছে। আপনি ডাব্লু 3 সি থেকে এটি পরীক্ষা করে দেখতে পারেন।

Comments

অন্য মানগুলির জন্য কেন নয় display?

— পল ডি ওয়েট

এটি কি একটি বিস্তৃত তালিকা বলে মনে হচ্ছে? এটা না।

— রাই-

Answer 12

জন্য শ্রেষ্ঠ উত্তর display: noneহল

display:inline

অথবা

display:normal

Comments

দেখে মনে হয় যে এর মতো কোনও জিনিস নেই display:normal। বিকাশকারী.মোজিলা.অর্গ.ইন-

— প্যাং

Answer 13

আপনি এটি ব্যবহার করতে পারেন display:block;এবং যোগ করতে পারেনoverflow:hidden;

Comments

আপনার নিজের অবদানের আগে দয়া করে বিদ্যমান উত্তরগুলি পড়ুন। গত মে থেকে একটি ভাল, ভাল upvated, এবং গৃহীত উত্তর আছে এবং আপনার সাথে কম-বেশি অভিন্ন যে নেতিবাচক মোট ভোটের একটি উত্তর আছে ।

— কুইন্টিন

আমি উত্তর দেখেছি। প্রদর্শন: আনসেট কাজ না করে পাশাপাশি প্রদর্শন: ব্লক করে। আমার মতামত :) @Quentin

— দিন

এবং display: blockএকটি <span>বা একটিতে ভাল কাজ করে না <td>... এবং এর আগের উত্তর ইতিমধ্যে উল্লেখ করেছে display: block।

— কোয়ান্টিন

আপনি উল্লেখ উত্তর সম্পাদনা করেছেন overflow: hidden। কেন? এটা যুক্ত করার অর্থ কী? এটিকে পূর্বাবস্থায় ফেলার সাথে এর কোনও যোগসূত্র নেই display: none।

— কোয়ান্টিন

Answer 14

সেরা "বিপরীত" হ'ল এটি ডিফল্ট মানটিতে ফিরে আসবে যা হ'ল:

display: inline

Comments

কেবল পরিষ্কার করতে চাই যে ডিসপ্লে প্রপার্টিটির কোনও ডিফল্ট মান নেই, তবে এইচটিএমএল উপাদানটি রয়েছে does ডিআইভির ডিফল্ট মানটি প্রদর্শন করা হবে: ব্লক, স্প্যানটি প্রদর্শন করতে ডিফল্ট হবে: ইনলাইন। তবে এটির নিজস্ব প্রদর্শন বৈশিষ্ট্যের একটি ডিফল্ট মান নেই।

— কেভিনিয়াস