একটি এলিমেন্টে ক্লাস প্রপার্টি যোগ করা ডেভেলপারকে ওয়েব পৃষ্ঠায় একটি ডাইনামিক ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সাহায্য করে। যখন একটি এলিমেন্টে একটি ক্লাস প্রপার্টি যোগ করা হয়, সেই সিলেক্ট করা এলিমেন্টটি সেই ক্লাস নামের সাথে যুক্ত স্টাইলিং অনুষ্ঠান করে।
একটি ব্যবহারকারী বাটনে ক্লিক করলে সেটা ভাবুন। বাটনে ক্লিক করলে, আমরা আমাদের CSS স্টাইলশীটের ভিত্তিতে ওয়েব পৃষ্ঠার একটি সেকশন পরিবর্তন করতে চাই। সেই স্টাইলিংয়ের সাথে যুক্ত ক্লাস নামটি এলিমেন্টে অ্যাসাইন করে আমরা বাটন ক্লিক করার পর এর আপিয়ারেন্স পরিবর্তন করতে পারি।
একটি ইন্টারঅ্যাক্টিভ অভিজ্ঞতা তৈরি করা যেকোনো ফ্রন্ট-এন্ড প্রোগ্রামিং-এ গুরুত্বপূর্ণ। এই গাইডে, আমরা সাদা জাভাস্ক্রিপ্টে একটি সিলেক্ট করা এলিমেন্টে ক্লাস নাম যোগ করার দুটি উপায় এক্সপ্লোর করব। শেষে, আপনি এই টুলটি আপনার নিজস্ব প্রজেক্টে ব্যবহার করতে পারবেন।
JavaScript Add Class কীভাবে ব্যবহার করবেন
জাভাস্ক্রিপ্টে, একটি ক্লাস নাম যোগ করা দুটিভাবে করা যায়। প্রথমে, আমরা নির্দিষ্ট HTML এলিমেন্টটি সিলেক্ট করি। তারপর, আমাদের দুটি অপশন থাকে: হয় className প্রপার্টি ব্যবহার করুন, নয়ত add() মেথড ব্যবহার করুন ক্লাস নামটি এলিমেন্টে যোগ করতে। আমরা পরবর্তী সেকশনে সিনট্যাক্স এবং ব্যবহার দেখব।
নিশ্চিত করুন, আমরা এখানে সাদা জাভাস্ক্রিপ্ট ব্যবহার করছি। কোনো লাইব্রেরি দরকার নেই। কারণ আমরা রেগুলার জাভাস্ক্রিপ্ট ব্যবহার করছি, একটি সাধারণ অভ্যাস হলো উপরের লজিককে একটি ফাংশনের ভিতরে র্যাপ করে সেটাকে একটি ইভেন্ট হ্যান্ডলারে পাস করা। এটি নিশ্চিত করবে যে ক্লাস নাম যোগ করার ফাংশনটি একটি নির্দিষ্ট ইভেন্ট ঘটার পরেই হবে।
HTML এলিমেন্টগুলো যতক্ষণ চাই ততক্ষণ ক্লাস নাম 가질 수 있습니다। এটি মনে রাখা উপযোগী কারণ আমরা এমন এলিমেন্টগুলোতে ক্লাস নাম যোগ করতে পারি যাদের ইতিমধ্যে অন্যান্য ক্লাস নাম বা আইডি আছে। আমাদের প্রজেক্টে কোন স্টাইলিং কোন ক্লাস নামের সাথে যুক্ত সেটা মনে রাখতে হবে এবং ক্লাস নামগুলো সেই এলিমেন্টগুলোর সাথে যোগ করতে হবে যেগুলো আমরা স্টাইল করতে চাই।
ক্লাস নাম যোগ করার জাভাস্ক্রিপ্ট সিনট্যাক্স
আমরা একটি এলিমেন্টে ক্লাস নাম যোগ করার দুটি উপায় দেখব। উপরের সেকশন থেকে মনে রাখবেন যে ক্লাস যোগ করার লজিককে একটি ফাংশনের ভিতরে র্যাপ করা একটি সাধারণ অভ্যাস। একবার আমাদের ফাংশন তৈরি হলে, আমরা সেটাকে onClick HTML অ্যাট্রিবিউটের ভিতরে কল করতে পারি।
সাদা জাভাস্ক্রিপ্ট ব্যবহার করে ক্লাস নাম যোগ করার প্রথম উপায় হলো className প্রপার্টির মাধ্যমে। লজিকটি হলো এলিমেন্টটি সিলেক্ট করা, তারপর সিলেক্ট করা এলিমেন্টে .className কল করা। তারপর আমরা ক্লাস নামটি এলিমেন্টের সাথে কনক্যাটেনেট (concatenate) করতে পারি।
আমাদের HTML-এ শুরু করি:
<div id="div"> Hello World </div> <button> Add Class </button>
এখানে "div" আইডি 가진 একটি <div> আছে। আমাদের <div>-এর নিচে একটি বাটন। এই বাটনটি ক্লিক করলে ক্লাস নাম যোগ করবে। এখন একটি উদাহরণ CSS ক্লাস দেখি।
.background { background-color: blue; color: white; }
আমাদের CSS ফাইলে, "background" ক্লাস আছে। এখানে এটি ব্লু ব্যাকগ্রাউন্ড কালার এবং হোয়াইট টেক্সট দিয়ে স্টাইল করা হয়েছে। আমরা "background" ক্লাস নামটি "div" আইডি 가진 <div>-এ যোগ করতে চাই।
জাভাস্ক্রিপ্ট একটি ফাংশনে <div>-টি সিলেক্ট করতে পারে, এইভাবে:
const addClass = () => {
const element = document.getElementById('div');
element.className += "background"
}
addClass নামে আমাদের ফাংশনটি "div" আইডি দিয়ে <div>-টি সিলেক্ট করবে। আমরা সেটাকে element নামে একটি ভেরিয়েবলে স্টোর করতে পারি। এখান থেকে, আমরা আমাদের ভেরিয়েবলে className প্রপার্টি কল করি এবং ক্লাস নাম "background" কনক্যাটেনেট করি। রিভিউ হিসেবে, জাভাস্ক্রিপ্টে কনক্যাটেনেশন এলিমেন্টটিকে একটি লিস্টে যোগ করে। অন্য কথায়, একটি ক্লাস নাম কনক্যাটেনেট করলে সেই ক্লাস নামটি এলিমেন্টে যোগ হবে এবং সেই এলিমেন্টে পূর্বে ডিফাইন করা ক্লাসগুলো همچ্ন থাকবে।
আমরা এখনও শেষ করিনি! আমাদের এখনও addClass ফাংশনটি কোথাও কল করতে হবে। বাটন ক্লিক হওয়ার পর <div>-এ ক্লাস নাম যোগ করি।
<div id="div"> Hello World </div> <button onClick="addClass()"> Add Class </button>
জাভাস্ক্রিপ্ট onClick মেথড ব্যবহার করে, আমরা বাটন ক্লিক হওয়ার পর আমাদের ফাংশন কল করতে পারি। বাটনে ক্লিক করে টেস্ট করি।
আমরা কী ঘটলো তা রিভিউ করি: আমরা "background" ক্লাস নামটি যোগ করলাম যা আমাদের CSS ফাইলে স্টাইলিংয়ের সাথে যুক্ত ছিল। একটি জাভাস্ক্রিপ্ট ফাংশন বিল্ড করার পর যা এলিমেন্টটি খুঁজে বের করে এবং ক্লাস নাম যোগ করে, বাটন ক্লিক হলে ক্লাস স্টাইলটি <div>-এ প্রয়োগ হয়েছে।
JavaScript add() মেথড
উপরের একই উদাহরণ ব্যবহার করে, ক্লাস নাম যোগ করার অন্য উপায়টি দেখি। এতে জাভাস্ক্রিপ্ট add() মেথড ব্যবহার করা হয়। উপরের উদাহরণের বিপরীতে, এখানে আমরা classList প্রপার্টি ব্যবহার করে add() কল করি।
আমাদের addClass() ফাংশনটি এখন এই রকম দেখাবে:
const addClass = () => {
const element = document.getElementById('div');
element.classList.add("background")
}
আমরা এখনও আইডি দিয়ে <div>-টি পাই এবং একটি ভেরিয়েবলে স্টোর করি। তারপর আমরা আমাদের ভেরিয়েবলে classList প্রপার্টি কল করি এবং তারপর add() মেথড। আমরা "background" ক্লাস নামটি add()-এ আর্গুমেন্ট হিসেবে পাস করি।
<div>-এ এখন "background" ক্লাসটি যোগ হয়েছে।
দুই ভিন্নভাবে কোডিং করেই আমরা একই ফলাফল পেয়েছি। আপনার কোডে কোনটি ইমপ্লিমেন্ট করবেন সেটা আপনার পছন্দ, কিন্তু দ্বিতীয় মেথডটি আরও ব্যাপকভাবে বেস্ট প্র্যাকটিস হিসেবে স্বীকৃত। add() ব্যবহার করা বেস্ট প্র্যাকটিস মाना হয় কারণ এটি কনক্যাটেনেশন ব্যবহার করার চেয়ে কম এরর-প্রোন।
উপসংহার
এই গাইডে, আমরা শিখেছি কীভাবে একটি এলিমেন্টে ক্লাস নাম যোগ করতে হয়। এটি তখন উপযোগী যখন আপনার पास একটি ক্লাস থাকে যা CSS ফাইলে স্টাইল করা আছে। সেই ক্লাস নামটি একটি নির্দিষ্ট HTML এলিমেন্টে যোগ করলে, সেই এলিমেন্টটি CSS ফাইলে পাওয়া স্টাইলিং ইনহেরিট করে।
পৃষ্ঠার এলিমেন্টগুলোর লুক ডাইনামিকভাবে পরিবর্তন করে, আমরা ব্যবহারকারীকে আমাদের অ্যাপের সাথে একটি ইন্টারঅ্যাক্টিভ অভিজ্ঞতা দিতে পারি। وقتی আমরা ইন্টারঅ্যাক্টিভ অ্যাপ্লিকেশন লিখি, তখন ব্যবহারকারীর কাছে এটি স্বाभাবিক এবং আকর্ষণীয় লাগে। এটি তাদের আরও এক্সপ্লোর করার জন্য ফিরে আনায়।
