উত্তর:
display:noneলুকানোর জন্য সেটিংস চেষ্টা করুন এবং display:blockপ্রদর্শন করতে সেট করুন।
display: block, কিছু সেট করতে হবে display: inline(যেমন <span>অথবা <a>অথবা <img>DOM উপাদানে)।
hiddenসাথে ডাকা একটি সিএসএস ক্লাস তৈরি করুন display: none। এটি লুকানোর জন্য কোনও উপাদানকে ক্লাস যুক্ত করুন, এটি শো সরিয়ে দিন। এটি অপসারণ করার সময়, displayসম্পত্তিটি ডিফল্ট ডিফল্টে পুনরুদ্ধার করা হয়।
display:noneএকটি উপাদান অপসারণ করার জন্য ব্যবহার করা ভাল বিকল্প তবে এটি স্ক্রিনরেডারদের জন্যও মুছে ফেলা হবে । এটি এসইও প্রভাবিত করে যদি আলোচনা হয়। এ তালিকাগুলির বাইরে এ বিষয়ে একটি ভাল, সংক্ষিপ্ত নিবন্ধ রয়েছে
যদি আপনি সত্যিই কেবল কোনও উপাদানটি গোপন করতে চান এবং কোনও উপাদান না সরিয়ে থাকেন তবে আরও ভাল ব্যবহার করুন:
div {
position: absolute;
left: -999em;
}
এটির মতো এটি স্ক্রিন পাঠকরাও পড়তে পারেন।
এই পদ্ধতির একমাত্র অসুবিধা হ'ল এই ডিআইভিটি আসলে রেন্ডার করা হয়েছে এবং এটি বিশেষত মোবাইল ফোনে পারফরম্যান্সে প্রভাব ফেলতে পারে ।
visibility: hidden;বলুন যে আপনার কাছে অন্যান্য পরম উপাদান রয়েছে তাদের জায়গার জন্য কোনও দ্বন্দ্ব নেই, কেবলমাত্র দ্বন্দ্ব z-index। কেবলমাত্র একটি উপাদান লুকানোর জন্য আমি সাথে যাবvisibility
পরিবর্তে ব্যবহার না visibility: hidden;করে দেখুন display: none;। প্রথম বিকল্পটি আড়াল হবে তবে তবুও স্থান নেয় এবং দ্বিতীয় বিকল্পটি লুকায় এবং কোনও স্থান নেয় না ।
এই প্রশ্নের উত্তরটি প্রদর্শন: কিছুই নয় এবং প্রদর্শন: ব্লক ব্যবহার করতে বলছে, তবে এটি দৃশ্যমান সম্পত্তি ব্যবহার করে সামগ্রী দেখানোর ও আড়াল করার জন্য সিএসএস ট্রানজিশনগুলি ব্যবহার করার চেষ্টা করছে এমন ব্যক্তির পক্ষে সহায়তা করে না।
এটি আমাকে ক্রেজিও করেছিল, কারণ প্রদর্শন ব্যবহার করে যে কোনও সিএসএস রূপান্তরকে হত্যা করা হয় kill
একটি সমাধান হ'ল দৃশ্যমানতা ব্যবহার করে এমন শ্রেণিতে এটি যুক্ত করা:
overflow:hiddenএটির জন্য কাজ করা লেআউটটির উপর নির্ভর করে তবে এটি খালি সামগ্রীটি ডিভের মধ্যে থাকা ডিভের মধ্যে রাখা উচিত।
প্রদর্শন: কোনওটিই সমাধান নয়, এটি সম্পূর্ণরূপে তার স্পেস সহ উপাদানগুলি গোপন করে।
display:noneএবংvisibility: hiddenvisibility:hidden মানে ট্যাগটি দৃশ্যমান নয়, তবে পৃষ্ঠার জন্য স্থান বরাদ্দ করা হয়েছে।
display:noneমানে সম্পূর্ণরূপে তার স্থান সহ উপাদানগুলি লুকিয়ে রাখে। (যদিও আপনি এটি ডিওএমের মাধ্যমে এখনও যোগাযোগ করতে পারেন)
display:noneলুকানোর জন্য এবং display:blockপ্রদর্শন করতে সেট করুন।
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenকেবল সামগ্রীর প্রদর্শন থামিয়ে দেয় তবে তবুও উল্লম্ব / অনুভূমিক স্থান ব্যবহার করে, প্রদর্শন করে: উপাদানটির জন্য উল্লম্ব / অনুভূমিক স্থানটি কেউ সরিয়ে দেয় না।
টগলিং displayমসৃণ সিএসএস রূপান্তরগুলির অনুমতি দেয় না। পরিবর্তে visibilityএবং উভয় টগল করুন max-height।
visibility: hidden;
max-height: 0;transform: translateX(-100%)। আমরা চাই নাdisplay: none
এখানে প্রদর্শনের পরে এগুলি ফিরিয়ে আনার জন্য এখানে আলাদা ধারণা রয়েছে: কিছুই নয়। ডিসপ্লে ব্যবহার করবেন না: ব্লক / ইনলাইন ইত্যাদি পরিবর্তে (জাভাস্ক্রিপ্ট ব্যবহার করা থাকলে) CSS এর সম্পত্তি প্রদর্শন '' (যেমন ফাঁকা) এ সেট করুন
আমার জ্ঞানের উপরে এটি 4 উপায়ে সম্ভব
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');এবং $("#buttonId").css('opacity', 0);
offsetTop, এবংdisplay:noneসেট হবেoffsetTopএখানে আমার সমাধান 0. ব্যবহার করতে ছিলvisibility: hiddenএকবার আমি আবার দৃশ্যমান উপাদান করা প্রয়োজন তারপর 0 থেকে প্রস্থ ও উচ্চতা সেট, আমি তিনটি গুণাবলীর ব্যবহার মুছে জাভাস্ক্রিপ্ট। কিছুটা হ্যাকি সমাধান, তবে এটি বেশিরভাগ ব্যবহারের ক্ষেত্রে কার্যকর হয়।