জাভাস্ক্রিপ্ট ক্লাসলিস্ট প্রপার্টি দিয়ে কিভাবে ক্লাস টগল করবেন

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

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

HTML স্ট্রাকচার

আমরা জাভাস্ক্রিপ্টের সাথে কার্যকরী জিনিসগুলিতে পৌঁছানোর আগে, আসুন কয়েকটি HTML উপাদান সেট আপ করি যাতে আমাদের সাথে যোগাযোগ করার কিছু থাকে। আসুন একটি মোড়ক, একটি বোতাম এবং একটি বাক্স তৈরি করি।

আপনার HTML নথির বডি ট্যাগের ভিতরে নিম্নলিখিতগুলি রাখুন:

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

প্যারেন্ট ডিভ এলিমেন্ট (র্যাপার) শুধুমাত্র সেখানেই আছে তাই আমরা CSS এর সাথে এর চাইল্ড এলিমেন্ট (বক্স এবং বোতাম) কেন্দ্রীভূত করতে পারি। এটি প্রসাধনী, এবং এটি কাজ করার জন্য প্রয়োজনীয় নয়।

দ্রষ্টব্য:আপনি যদি কোডপেনের মতো একটি অনলাইন কোড সম্পাদক ব্যবহার করেন তবে আপনি এই কোডটি HTML ট্যাব উইন্ডোতে যুক্ত করতে পারেন। তারা বডি ট্যাগ সহ পর্দার আড়ালে আপনার জন্য বাকি HTML যোগ করে।

CSS শৈলী

প্যারেন্ট ডিভ এলিমেন্টের একটি .wrapper আছে ক্লাসের কিছু ফ্লেক্সবক্স বৈশিষ্ট্য রয়েছে যা তার চাইল্ড উপাদানগুলিকে কেন্দ্র করে সারিবদ্ধ করে:বক্স এবং বোতাম। আমি ফ্লেক্সবক্স কীভাবে এবং কেন তা নিয়ে আলোচনা করব না, এটি অন্য টিউটোরিয়ালের জন্য।

বোতাম এবং বাক্সটি প্রসাধনী উদ্দেশ্যে কিছু মৌলিক শৈলী ক্লাস পায়।

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

এখানে ফোকাস করার জন্য গুরুত্বপূর্ণ বিষয় হল .bg-red ক্লাস যা CSS ব্যাকগ্রাউন্ড-রং ধারণ করে '#AA2F18' (লাল) মান সহ সম্পত্তি। এটি সেই ক্লাস যা আমরা আমাদের বক্স এলিমেন্টে টগল (যোগ বা অপসারণ) করতে চাই যখন আমরা বোতাম এলিমেন্টে ক্লিক করি।

জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলিং

আমরা জাভাস্ক্রিপ্টের সাথে উপাদানগুলি পরিচালনা শুরু করার আগে, আমাদের প্রথমে আমাদের দুটি উপাদানের (বক্স এবং বোতাম) একটি রেফারেন্স সংরক্ষণ করতে হবে। আমরা দুটি ভেরিয়েবল, button ঘোষণা করে তা করি , এবং box .তারপর আমরা দুটি উপাদানকে তাদের নিজ নিজ ভেরিয়েবলে বরাদ্দ করি।

যে বক্স এবং বোতাম উপাদানটি আমরা একটি রেফারেন্স সংরক্ষণ করতে চাই সেটি নির্বাচন করতে আমরা গৌরবময় querySelector ব্যবহার করব আমাদের উপাদানের ক্লাস দখল করার পদ্ধতি:

let button = document.querySelector(".button");
let box = document.querySelector(".box");

এখন যেহেতু আমাদের প্রতিটি টার্গেট এলিমেন্টের একটি রেফারেন্স আছে, আমরা তাদের বৈশিষ্ট্য এবং পদ্ধতিগুলি অ্যাক্সেস করে তাদের DOM ম্যানিপুলেট করতে পারি। এই ক্ষেত্রে, আমরা একটি ইভেন্ট লিসেনার ব্যবহার করতে চাই৷ যেটি একটি ক্লিক ইভেন্ট শোনে বোতাম উপাদানে। ক্লিক শনাক্ত হওয়ার পর আমরা একটি ফাংশন চালাতে চাই যা ব্যাকগ্রাউন্ড কালার টগল করা চালায় আমাদের বক্স এলিমেন্টে।

এটি করতে আমরা addEventListener() সংযুক্ত করব আমাদের বোতাম উপাদানের পদ্ধতি (এর পরিবর্তনশীল রেফারেন্সের মাধ্যমে)। এই ইভেন্ট লিসেনার পদ্ধতিতে আমরা দুটি প্যারামিটার মান যোগ করছি:'click' (ইভেন্টের ধরন), এবংfunction() . আমরা এই উদাহরণে একটি বেনামী (নামহীন) ফাংশন ব্যবহার করব৷

তারপর বেনামী ফাংশনের ভিতরে:আমরা JavaScript classList প্রপার্টির toggle() সংযুক্ত করি আমাদের বক্স উপাদান পদ্ধতি. টগল পদ্ধতির কাজ হল আমাদের .bg-red যোগ করা বা অপসারণ করা ক্লাস:

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

ক্লাসলিস্ট টগল পদ্ধতিটি এইভাবে কাজ করে:যদি নির্দিষ্ট শ্রেণীটি লক্ষ্য উপাদানটিতে ইতিমধ্যেই বিদ্যমান থাকে তবে এটি সরানো হবে। যদি এটি বিদ্যমান না থাকে, তাহলে এটি যোগ করা হবে।

সম্পন্ন করা হয়েছে! আপনি এখন জানেন কিভাবে প্লেইন জাভাস্ক্রিপ্ট দিয়ে নির্দিষ্ট এলিমেন্টে ক্লাস টগল করতে হয়। আমি কোডপেনে এই টিউটোরিয়াল থেকে সমস্ত কোড রেখেছি।

কোডটি IE10 এবং তার উপরের সমস্ত আধুনিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ৷