html tutorial পেজে স্থান না নিয়েই কীভাবে উপাদানগুলি লুকাতে হয়?




html tutorial pdf (9)

আমি visibility:hidden ব্যবহার করছি visibility:hidden কিছু উপাদান লুকাতে visibility:hidden , তবে তারা এখনও লুকানো অবস্থায় পৃষ্ঠাটিতে স্থান নেয়।

কীভাবে আমি তাদের সম্পূর্ণভাবে অদৃশ্য হয়ে যেতে পারি, যেমন তারা ডোমে নেই (কিন্তু আসলেই তাদের DOM থেকে সরিয়ে ফেলা)?


display:none সেটিং করার চেষ্টা করুন display:none লুকানো এবং display:block সেট করতে display:none display:block করার জন্য display:block


ডিসপ্লে: কেউই সমাধান নয়, এটি সম্পূর্ণভাবে তার স্পেসের উপাদানগুলিকে লুকিয়ে রাখে।

display:none সম্পর্কে গল্প display:none এবং display:none

visibility:hidden মানে ট্যাগটি দৃশ্যমান নয়, তবে পৃষ্ঠায় এটির জন্য স্থান বরাদ্দ করা হয়েছে।

display:none মানে সম্পূর্ণরূপে তার স্থান সঙ্গে উপাদান লুকায়। (যদিও আপনি এখনও DOM এর মাধ্যমে এটির সাথে যোগাযোগ করতে পারেন)


পরিবর্তে শৈলী ব্যবহার করুন

<div style="display:none;"></div>

এখানে প্রদর্শনের পরে তাদের ফিরিয়ে আনতে একটি ভিন্ন পদক্ষেপ: none। ডিসপ্লে ব্যবহার করবেন না: ব্লক / ইনলাইন ইত্যাদি। পরিবর্তে (জাভাস্ক্রিপ্ট ব্যবহার করে) CSS সম্পত্তি প্রদর্শনের সেট '' (অর্থাৎ ফাঁকা)


$('#abc').css({"display":"none"});

এই কন্টেন্ট গোপন করে এবং খালি স্থান ছেড়ে না।


এই প্রশ্নের উত্তর প্রদর্শন ব্যবহার করতে বলছে: কেউ এবং প্রদর্শন: ব্লক, কিন্তু এটি দৃশ্যমানতা সম্পত্তি ব্যবহার করে সামগ্রী প্রদর্শন এবং লুকানোর জন্য CSS সংক্রমণগুলি ব্যবহার করার চেষ্টা করছে এমন কেউকে সাহায্য করে না।

এই এছাড়াও আমাকে পাগল ঘটেছে, প্রদর্শন ব্যবহার করে কোনো CSS সংক্রমণ হত্যা।

এক সমাধানটি ক্লাসে এটি যোগ করা যা দৃশ্যমানতা ব্যবহার করছে:

overflow:hidden

এই কাজের জন্য লেআউট উপর নির্ভর করে, কিন্তু এটি থাকা DIV মধ্যে খালি কন্টেন্ট রাখা উচিত।


display:none ব্যবহার করার জন্য display:none কেবল একটি উপাদান সরানোর জন্য কোনওও ভাল বিকল্প নয় তবে এটি স্ক্রীনreaders এর জন্য সরানো হবে। এটি এসইও প্রভাবিত হলে আলোচনাও আছে। একটি তালিকা পাশাপাশি যে বিষয়ে একটি ভাল, সংক্ষিপ্ত নিবন্ধ আছে

যদি আপনি সত্যিই লুকান এবং একটি উপাদান অপসারণ না চান, ভাল ব্যবহার করুন:

div {
  position: absolute; 
  left: -999em;
}

এই লাইক পাঠকদের দ্বারা এটি পড়তে পারেন।

এই পদ্ধতির একমাত্র অসুবিধা হ'ল এই ডিভিটি আসলেই রেন্ডার করা হয়েছে এবং এটি বিশেষত মোবাইল ফোনে কর্মক্ষমতা প্রভাবিত করতে পারে।


আমার জ্ঞান উপরে এটা 4 উপায়ে সম্ভব

  1. এইচটিএমএল <button style="display:none;"></button>
  2. সিএসএস #buttonId{ display:none; } #buttonId{ display:none; }
  3. jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);

প্রদর্শন: পৃষ্ঠায় সাদা স্থান গ্রহণ এড়াতে সেরা জিনিসটি কেউ নেই





css