program - html tutorial pdf




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

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

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

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

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

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

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


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

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

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


দেখুন, visibility: hidden; ব্যবহার করার পরিবর্তে visibility: hidden; display: none; ব্যবহার display: none; । প্রথম অপশনটি লুকিয়ে থাকবে তবে এখনও স্থান নেয় এবং দ্বিতীয় বিকল্পটি লুকিয়ে থাকবে এবং কোনও স্থান গ্রহণ করবে না


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

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

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

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

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


display:none লুকান এবং display:block সেট display:none display:block


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


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

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





css